vue watch 使用

Vue 的 `watch` 选项用于监听某个数据的变化，当该数据发生变化时，会执行相应的回调函数。

使用方法：

1. 在 Vue 实例的 `watch` 选项中添加需要监听的数据和对应的回调函数。

new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('message changed from', oldVal, 'to', newVal)
    }
  }
})

2. 另一种语法是使用对象形式来设置 `watch`，这种方式可以包含更多选项。

new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  watch: {
    message: {
      handler: function (newVal, oldVal) {
        console.log('message changed from', oldVal, 'to', newVal)
      },
      deep: true, // 深度监听
      immediate: true // 立即执行
    }
  }
})

在以上代码中，`handler` 表示回调函数，`deep` 表示是否深度监听（即深度遍历对象或数组中的所有属性），`immediate` 表示是否立即执行回调函数。

注意，`watch` 中监听的数据必须在 `data` 中声明过，否则无法监听。

当监听的数据发生变化时，回调函数会被自动调用，并传入两个参数：新值和旧值。我们可以在回调函数中执行一些逻辑操作，如更新页面显示等。