Vue.js 中使用 this.$watch() 监听数据变化

在 Vue 实例中，可以使用 this.$watch() 方法来监听数据的变化。

基本用法

// 监听数据
this.$watch('数据名称', function(newValue, oldValue) {
  // 数据发生变化时的回调
  console.log('数据发生变化了，新值为：' + newValue + '，旧值为：' + oldValue);
});

其中，第一个参数为要监听的数据名称，可以是一个字符串或一个函数；第二个参数为监听数据变化时的回调函数，其中包含新值和旧值两个参数。

深度监听

如果要监听的数据是一个对象或数组，可以使用深度监听选项：

// 监听对象的变化
this.$watch('obj', function(newValue, oldValue) {
  console.log('数据发生变化了，新值为：', newValue);
}, { deep: true });

// 监听数组的变化
this.$watch('arr', function(newValue, oldValue) {
  console.log('数据发生变化了，新值为：', newValue);
}, { deep: true });

在深度监听选项中，将 deep 属性设置为 true，就可以对对象或数组进行深度监听了。