vue2 watch 监听对象的变化

Vue 2中的`watch`是一个响应式的生命钩子，它允许你在数据变化时执行自定义函数。当你需要监听某个对象属性的变化时，你可以创建一个`watcher`来监控这个特定路径。基本语法如下：

// 创建一个普通的watcher
this.$watch('myObject.myProperty', (newVal, oldVal) => {
  // 当'myObject.myProperty'的值发生变化时，这里会触发，新旧值会被传入回调函数
  console.log(`新的值: ${newVal}, 老的值: ${oldVal}`);
});

// 如果你想监听整个对象的变化，可以这样：
this.$watch('myObject', (newObj, oldObj) => {
  // newObj 和 oldObj 是完整的对象，在对象有新增、删除或修改属性时都会触发
});

`watch`接受两个可选的配置选项：
1. `deep`：布尔值，默认为`false`。如果设置为`true`，将会深度监听对象的每一个属性变化。
2. `immediate`：布尔值，默认为`false`。如果设置为`true`，则在首次设置目标表达式的值时立即执行回调函数。

相关问题

vue2watch监听对象

在 Vue2 中，可以使用 $watch 监听一个对象的属性，并在值改变时触发回调函数。具体的用法为：

vm.$watch('obj.prop', function (newVal, oldVal) {
  // do something
})

其中，'obj.prop' 是需要监听的属性路径，newVal 和 oldVal 分别表示新值和旧值。

如果需要监听多个属性，可以使用 $watch 的第一个参数是一个函数的形式：

vm.$watch(
  function () {
    return {
      prop1: this.obj.prop1,
      prop2: this.obj.prop2
    }
  },
  function (newVal, oldVal) {
    // do something
  },
  { deep: true }
)

在这个例子中，$watch 监听的是一个函数，返回一个对象，包含了需要监听的属性。当这些属性中的任意一个值改变时，回调函数就会被触发。

vue2 watch监听对象值

在 Vue2 中，可以使用 watch 监听对象值的变化。具体实现方式如下：

watch: {
  obj: {
    handler: function (newVal, oldVal) {
      // do something
    },
    deep: true
  }
}

其中，`obj` 是要监听的对象，`handler` 是当 `obj` 发生变化时执行的函数，`deep` 表示是否深度监听。