vue的watch

在 Vue 中，watch 是一个用于监听数据变化并执行相应处理逻辑的 API。它可以监视一个数据对象中的属性，当该属性的值发生变化时，会触发回调函数，并可以执行一些操作。

watch 的基本语法如下：

watch: {
  // 监听的数据对象
  data: {
    // 回调函数，当 data 的值发生变化时会触发该函数
    handler(newVal, oldVal) {
      // 执行一些操作
    },
    // 是否立即执行回调函数
    immediate: true,
    // 是否深度监听对象内部属性的变化
    deep: true
  }
}

其中，data 是要监听的数据对象，handler 是回调函数，immediate 是可选的，表示是否在组件创建时立即执行一次回调函数，deep 也是可选的，表示是否深度监听对象内部属性的变化。

除了监听单个属性之外，还可以使用 $watch 方法来监听多个属性或者数组的变化。具体用法如下：

// 监听多个数据的变化
this.$watch(
  ['data1', 'data2'],
  (newVals, oldVals) => {
    // 执行一些操作
  },
  { immediate: true }
)

// 监听数组的变化
this.$watch(
  () => this.arr,
  (newVal, oldVal) => {
    // 执行一些操作
  },
  { deep: true }
)

在使用 watch 时，需要注意一些细节。比如，当监听一个对象时，修改对象内部属性的值不会触发回调函数，需要使用 deep 选项来深度监听。此外，如果监听的数据对象是一个数组，那么在修改数组元素的值时，也不会触发回调函数，需要使用 $set 方法来修改数组元素的值。