vue3 データが watch/watchEffect を監視する方法

リスナーの機能は、応答状態 が変化するたびに をトリガーすることであることは誰もが知っています。結合された API では、watch() 関数 と ## を使用できます。 #watchEffect() function,

応答状態を変更すると、Vue コンポーネントの更新とリスナー コールバックが同時にトリガーされる場合があります。

デフォルトでは、ユーザー作成のリスナー コールバックは、Vue コンポーネントが更新される前に呼び出されます。これは、リスナー コールバックでアクセスする DOM が、Vue によって更新される前の状態になることを意味します。

それでは、それらをどのように活用できるかを考えてみましょう。それらの違いは何ですか?

watch() function

watch は、ref をリッスンするなど、特定のデータ ソースをリッスンする必要があります。watch の最初のパラメータは、さまざまな形式の「データ ソース」にすることができます。

ref (計算されたプロパティを含む)、応答オブジェクト、ゲッター関数、または 複数のデータ ソースの配列を指定できます。次のように:

const x = ref(0)
const y = ref(0)

// 单个 ref
watch(x, (newX) => {
  console.log(`x is ${newX}`)
})

// getter 函数
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`sum of x + y is: ${sum}`)
  }
)



// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`)
})


const obj = reactive({ count: 0 })
//传入一个响应式对象
watch(obj, (newValue, oldValue) => {
  // 在嵌套的属性变更时触发
  // 注意：`newValue` 此处和 `oldValue` 是相等的
  // 因为它们是同一个对象！
})

obj.count++


watch(
  () => obj.count,
  (newValue, oldValue) => {
    // 注意：`newValue` 此处和 `oldValue` 是相等的
    // *除非* obj.count 被整个替换了
  },
  { deep: true }
)

応答オブジェクトのプロパティ値を直接聞くことはできないことに注意してください

const obj = reactive({ count: 0 })

// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
  console.log(`count is: ${count}`)
})

を返す

getter 関数を使用する必要があります。 property:

// 提供一个 getter 函数
watch(
  () => obj.count,
  (count) => {
    console.log(`count is: ${count}`)
  }
)

watch はデフォルトで遅延型です。コールバックはデータ ソースが変更された場合にのみ実行されます。ただし、シナリオによっては、リスナーの作成時にコールバックをすぐに実行したい場合があります。たとえば、いくつかの初期データをリクエストし、関連する状態が変化したときにデータを再リクエストしたいとします。

immediate: true オプション:

watch(source, (newValue, oldValue) => {
  // 立即执行，且当 `source` 改变时再次执行
}, { immediate: true })

watchEffect() function

watchEffect( ) を渡すことで、リスナーのコールバックを強制的に即座に実行できます。

コールバックのリアクティブな依存関係を 自動的に追跡できるようになります。

const todoId = ref(1)
const data = ref(null)

watchEffect(async () => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  data.value = await response.json()
})

この例では、コールバックはすぐに実行されます。

immediate: true を指定する必要はありません。実行中、todoId.value が依存関係として自動的に追跡されます (計算されたプロパティと同様)。 todoId.value が変更されるたびに、コールバックが再度実行されます。 watchEffect() を使用すると、 todoId をソース値 として明示的に渡す必要がなくなりました。

watchEffect() は、複数の依存関係を持つリスナーに適していますが、依存関係が 1 つだけのこの例では、利点は比較的小さいです。さらに、ネストされたデータ構造内の複数のプロパティをリッスンする必要がある場合、watchEffect() はすべてのプロパティを再帰的に追跡するのではなく、コールバックで使用されるプロパティのみを追跡するため、ディープ リスナーよりも効率的である可能性があります。

リスナー コールバックで Vue によって更新された DOM にアクセスしたい場合は、

flush: ‘post’ オプション、post-flush watchEffect() を指定する必要があります。は、より便利なエイリアスです watchPostEffect():

import { watchPostEffect } from 'vue'

watchPostEffect(() => {
  /* 在 Vue 更新后执行 */
})

watch と watchEffect の関係と違い

watch と watchEffect はどちらも、副作用のあるコールバックを応答的に実行できます。それらの主な違いは、

リアクティブ依存関係の追跡方法 :

watch は、明示的にリッスンされる

データ ソース のみを追跡します。コールバックでアクセスされたものは追跡されません。さらに、 コールバック は、データ ソースが実際に変更された場合にのみトリガーされます。 watch は副作用が発生したときに依存関係の追跡を回避するため、コールバック関数がいつトリガーされるかをより正確に制御できます。

watchEffect では、副作用の発生中に依存関係が追跡されます。同期中に、アクセス可能なすべてのリアクティブ プロパティが自動的に追跡されます。これはより便利で、コードがすっきりする傾向がありますが、リアクティブな依存関係が明確ではない場合があります。

複数の依存関係を持つリスナーに適しています

以上がvue3 データが watch/watchEffect を監視する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。