简述Vue中watch用法详解 ?

在 Vue.js 中，watch 是一个用于观察和响应 Vue 实例上的数据变化的功能。当被监视的数据发生变化时，可以执行一些特定的函数或逻辑。这对于需要在数据变化时执行异步或开销较大的操作非常有用。

watch 可以在 Vue 实例的选项中定义，或者在组件中使用 watch 属性定义。

基本用法

在 Vue 实例或组件中，你可以这样定义 watch：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  watch: {
    // 当 `message` 改变时，这个函数将被调用
    message(newVal, oldVal) {
      console.log(`Message changed from ${oldVal} to ${newVal}`);
    }
  }
});

深度监听

默认情况下，watch 是浅层的，也就是说它不会观察对象内部的嵌套属性。如果你需要深度监听一个对象，你可以使用 deep 选项：

watch: {
  someObject: {
    handler(newVal, oldVal) {
      // 当 `someObject` 或其嵌套属性变化时，这个函数将被调用
    },
    deep: true
  }
}

立即执行

使用 immediate 选项，可以让 watch 在绑定时立即执行一次回调函数：

watch: {
  someProp: {
    handler(newVal, oldVal) {
      // 当 `someProp` 首次被绑定或改变时，这个函数将被调用
    },
    immediate: true
  }
}

批处理

在 Vue 2.9.0+ 中，你可以使用 batch 选项来控制 watch 回调的批处理。当 batch 为 true 时，多个 watch 回调将被异步批处理并在下一个事件循环中同步执行。

watch: {
  someProp: {
    handler(newVal, oldVal) {
      // 当 `someProp` 改变时，这个函数将在下一个事件循环中同步执行
    },
    batch: true
  }
}

监听计算属性

虽然 watch 通常用于监听数据属性，但你也可以监听计算属性。但请注意，计算属性默认是缓存的，只有当它的依赖属性发生变化时，它才会重新计算。因此，监听计算属性可能不会像你期望的那样频繁触发。

停止监听

你可以使用 this.$watch 方法来动态添加一个 watch，并返回一个取消监听的函数。当你不再需要监听时，可以调用这个函数来停止监听：

const unwatch = this.$watch('someProp', (newVal, oldVal) => {
  // 当 `someProp` 改变时，这个函数将被调用
});

// 当不再需要监听时，调用 `unwatch` 函数
unwatch();

这就是 Vue 中 watch 的基本用法和选项。通过使用 watch，你可以更灵活地响应数据变化，并在数据变化时执行特定的逻辑。