Vue で watch を使用して配列の変更を監視する方法

Vue で watch を使用して配列の変更を監視する方法

Vue は、フロントエンド開発で最も広く使用されているフレームワークの 1 つで、データの応答性、テンプレートのレンダリング、およびコンポーネント化を実装するための便利な方法が多数提供されています。およびその他の機能。 Vue では、データの変更を監視するために watch を使用することがよくありますが、配列の変更を監視する必要がある場合は、いくつかの詳細に注意する必要があります。

Vue では、watch を使用して、単一のプロパティまたはオブジェクトの変更を監視できます。基本的な使用法は次のとおりです:

watch: {
  // 监听对象属性
  obj: {
    handler: function (newVal, oldVal) {
      // ...
    },
    deep: true
  },
  // 监听单个属性
  prop: function (newVal, oldVal) {
    // ...
  }
}

配列の変更を監視したい場合は、次のことを行う必要があります。次の点に注意してください:

1. vm.$watch メソッドを使用する

Vue には、データの変更を監視するための vm.$watch メソッドが用意されており、このメソッドは監視をキャンセルする関数を返します。ここでの vm は Vue のインスタンスを指します。配列の場合、このメソッドを使用して配列内の変更を監視できます。その基本的な使用法は次のとおりです:

vm.$watch('arr', function (newVal, oldVal) {
  // ...
}, {
  deep: true
})

ここでの arr は、監視する必要がある配列です。ハンドラー コールバック関数の newVal と oldVal は、それぞれ監視される新しい値と古い値を表します。さらに、配列内の各要素がオブジェクトであるのが一般的であるため、詳細な監視を実現するには deep を true に設定する必要があります。

Vue は、vm.$watch メソッドを使用して監視されている配列を自動的にハイジャックしないことに注意してください。したがって、アレイ内の変更を監視するには、アレイを手動でハイジャックする必要があります。

2. 配列内の各要素を監視する

配列内の各要素の変更を監視する必要がある場合は、vm.$watch メソッドの immediate パラメータと handler パラメータを使用できます。コードは次のとおりです。

arr.forEach(function (item, index) {
  vm.$watch(
    function () {
      return arr[index];
    },
    {
      immediate: true,
      deep: true,
      handler: function (newVal, oldVal) {
        // ...
      }
    }
  );
});

ここでのimmediateはtrueです。これは、コールバック関数がリッスン時に1回実行されることを意味します。上記のコードは配列全体をハイジャックするのではなく、各要素を個別に監視することに注意してください。

3. 計算プロパティを使用する

Vue の計算プロパティは既存のデータに基づいて新しいデータを計算できるため、計算プロパティを使用して配列の変更を監視できます。その基本的な使用法は次のとおりです。

computed: {
  // 监听arr数组
  arrWatcher: function () {
    this.arr; // 调用一次arr，以实现依赖收集
    return this.arr;
  }
},
watch: {
  // 监听计算属性
  arrWatcher: {
    handler: function (newVal, oldVal) {
      // ...
    },
    deep: true
  }
}

ここでの arrWatcher は定義した計算プロパティであり、計算プロパティの戻り値は監視対象の配列です。計算されたプロパティの変化を監視するだけです。計算されたプロパティは依存関係を自動的に収集するため、配列が変更されると、計算されたプロパティは自動的に更新され、監視コールバック関数がトリガーされます。

計算プロパティを使用して配列の変更を監視する場合、次の点に注意する必要があります。配列の長さの変更のみを監視する必要があり、配列内の要素の変更を気にしない場合は、次のようになります。その後、計算されたプロパティを使用するだけでそれを実現できます。ただし、配列内の要素の変更を監視する必要がある場合は、配列内の各要素をハイジャックする必要があり、また vm.$watch メソッドを使用する必要があります。

要約すると、vm.$watch メソッドを使用して配列内の各要素を監視し、計算されたプロパティを使用して Vue の配列内の変更を監視できます。これらのメソッドを使用する場合、Vue が配列内の変更を正しく監視できるように配列をハイジャックする必要があることに注意することが重要です。

以上がVue で watch を使用して配列の変更を監視する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。