vue3中的watch使用

在 Vue 3 中，`watch` 是一种监听属性值变动的生命周期钩子，它允许你在依赖项（通常是Vue实例的数据）改变时执行特定的操作。`watch` 可以接受两个参数：一个或两个回调函数。

1. **简单模式**（仅提供一个回调函数）：

   watch(obj, handler, { deep, immediate }) {
     // obj: 要监视的属性名或路径
     // handler: 当 obj 变化时调用的函数，接收当前的新值作为参数
     this.someValue = value; // 将会自动更新视图
   }

当`obj`属性值发生变化时，`handler`会被调用。

2. **深度监控模式**（第二个参数是`{deep: true}`）：
这样可以检测嵌套对象的变化：

   watch('someDeepObject', handler, { deep: true })

3. **立即调用模式**（第三个参数是`{immediate: true}`）：
在首次创建时立即执行一次回调，而不是等到下一次循环周期：

   watch('data', handler, { immediate: true })

4. **数组监听**（`handler`接受一个数组作为参数，表示所有监听到的值）：

   watch(['array1', 'array2'], handler)

5. **自定义getter和setter**：
可以提供计算属性作为`getter`，以及在修改属性时执行清理工作的`setter`：

   watch(
     {
       prop: getSomeComputedValue,
       deep: true
     },
     setPropToSomeOtherValue
   )

使用 `watch` 可以帮助你管理数据变更和视图同步，使代码更易维护。