vue2 watch 代码

Vue 2中的`watch`是一个响应式监听机制，用于在数据发生变化时执行特定的函数。它的基本语法如下：

// 在组件的data里定义需要观察的变量
data() {
  return {
    count: 0
  }
}

// 使用watch选项来监听count的变化
methods: {
  increment() {
    this.count++
  },
  watcherExample: {
    // 第一个参数是目标属性名，可以是字符串或路径
    // 第二个参数是getter，通常不需要写，因为Vue会自动获取当前值
    // 第三个参数是setter，当目标属性的值改变时会被调用
    handler(newCount) {
      console.log('Count changed to:', newCount)
    },
    deep: true, // 如果你想深度监听嵌套的对象或数组
    immediate: true, // 是否立即执行一次，在首次设置时
    // 当然，你也可以直接提供一个函数作为handler
    handle(newCount) { ... }
  }
}

当你调用`increment()`时，`watch`内的`handler`就会被触发。如果设置了`deep`为`true`，它还会监听目标属性的嵌套变化。