Vue2 Watch: 响应式数据变化监听 - 深入解析与高级用法

Vue2 中的 watch 是一个响应式的 API，可以监听数据的变化并做出相应的操作。watch 可以监视一个表达式，当表达式的值发生变化时，执行回调函数。它可以用于监听数据的变化，触发异步操作，更新 UI 等。

使用 watch 可以监听数据的变化，其基本用法如下：

watch: {
  // 监听变量
  var1: function (newVal, oldVal) {
    // ...
  },
  // 监听对象属性
  'obj1.prop1': function (newVal, oldVal) {
    // ...
  },
  // 监听数组元素
  'arr1[0]': function (newVal, oldVal) {
    // ...
  }
}

除了基本用法外，watch 还提供了一些高级用法，比如：

1. 深度监听：当对象或数组中的属性发生变化时，也会触发 watch 回调函数。可以通过设置deep: true来实现。

2. 立即执行：当 watch 被定义时，立即执行一次回调函数。可以通过设置immediate: true来实现。

3. 取消监听：可以通过调用unwatch()方法来取消 watch 监听。

4. 监听多个变量：可以通过传入一个数组来监听多个变量或属性。

5. 监听自定义事件：可以通过监听组件实例的自定义事件来触发 watch 回调函数。

6. 监听计算属性：可以通过监听计算属性来触发 watch 回调函数。

总之，watch 非常强大，可以帮助我们实现很多复杂的业务逻辑。