Vue.jsの $watch() メソッドについて

Vue.jsの $watch() メソッドは、Vueインスタンス内のデータの変化を監視するために使用されます。特定のデータプロパティの値が変更されたときに、コールバック関数が呼び出されます。これは、リアクティブな動作を実現し、データの変更を検知して適切な処理を行うのに役立ちます。

そもそもVue.jsとは？という方は以下のリンクからご覧ください

以下は、$watch() メソッドの基本的な構文です

vm.$watch('expression', callback(newValue, oldValue))

vm: Vue インスタンスへの参照です。

‘expression’: 監視するデータプロパティのパスを指定します。このパスは、Vue インスタンスのデータオブジェクト内のプロパティを参照します。例えば、’myDataProperty’ のような形式です。

callback: 監視対象のデータが変更されたときに実行されるコールバック関数です。この関数は、新しい値（newValue）と変更前の値（oldValue）の2つの引数を受け取ります。

var vm = new Vue({
  data: {
    count: 0
  },
  created: function () {
    // 'count' の変化を監視し、変化があった場合にコールバック関数を実行する
    this.$watch('count', function (newValue, oldValue) {
      console.log('countの値が変更されました。新しい値:', newValue, '古い値:', oldValue);
    });
  }
});

// 'count' の値を変更する
vm.count = 1; // コンソールに "countの値が変更されました。新しい値: 1 古い値: 0" が出力される

この例では、$watch() メソッドを使用して count プロパティの変更を監視しています。count の値が変更されるたびに、指定されたコールバック関数が呼び出され、新しい値と古い値がコンソールに出力されます。