Vue 3 は、watch 関数を通じて複数のデータ変更をリッスンします。

Vue 3 は watch 関数を通じてデータの変更をリッスンします。Vue 3 では、次のメソッドを使用して複数のデータ ソースをリッスンできます。

watch({ firstName: 'first', lastName: 'last' }, function (newValues, oldValues) {
    // 新值和旧值的变化都会触发这个回调
    console.log(newValues, oldValues);
​​​​​​​})

watch この関数ではオブジェクトを渡すことができ、オブジェクトのプロパティはリッスンするデータ ソースの名前に対応し、プロパティの値はデータ ソースに対応するプロパティ名であることがわかります。 さらに、データ ソースが変更されたときに応答するためにコールバック関数を渡すことができます。

さらに、配列内のデータ変更をリッスンしたい場合は、 deep ディープ リスニング用の属性を使用できます。

watch(() => { return myArray; }, function (newArray, oldArray) {
  // 数组发生变化时触发这个回调
  console.log(newArray, oldArray);
}, {
  deep: true
​​​​​​​})

この watch 関数では、まずリッスンする必要がある配列を返します myArray。3 番目のパラメーターには、 deep: trueディープ リスニングを実行する必要があることを示す を渡します。このようにして、配列内のいずれかの要素が変更されると、コールバック関数がトリガーされます。

Vue 3 の関数はリアクティブであることに注意してください watch 。つまり、コールバック関数でリッスンされたデータ ソースを変更すると、この変更によって関数が watch 再度トリガーされます。したがって、データを処理するときは、循環依存関係などの問題に注意する必要があります。