vue watch 用法

Vue.js 提供了一种监视数据变化的方法叫做 `watch`。`watch` 是一个对象，它的每个属性对应着一个要监视的数据项，属性值是一个函数，用来响应数据变化。

下面是一个示例：

data() {
  return {
    message: '',
    counter: 0
  }
},
watch: {
  message(val) {
    console.log(`message的值已经变成了${val}`)
  },
  counter(val) {
    console.log(`counter的值已经变成了${val}`)
  }
}

在这个示例中，我们定义了两个要监视的数据项：`message` 和 `counter`。每当它们的值发生变化时，对应的 `watch` 函数就会被调用。

除了上述的基本用法，`watch` 还提供了一些高级特性，比如：

- `deep`：是否深度监视（即监视对象内部属性的变化），默认为 `false`。
- `immediate`：是否在组件创建时立即执行一次 `watch` 函数，而不是等待数据变化，默认为 `false`。
- `handler`：当要监视的数据项很多时，可以使用 `handler` 属性简化代码，将所有的 `watch` 函数都定义在一个对象中，每个属性的键是要监视的数据项，值是对应的响应函数。

更多用法可以参考 Vue.js 的官方文档：[https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC-Watch](https://cn.vuejs.org/v2/guide/computed.html#侦听-Watch)。