vue3watch用法

Vue 3中的`watch`是一个响应式属性监听器，它允许你在数据发生变化时执行特定的操作。它的基本语法如下：

this.$watch('expression', callback, [options]);

- `expression`：要监视的对象路径或计算属性。可以是一个字符串表达式，也可以是返回值依赖于其他属性的函数。
- `callback`：每当指定的表达式改变时调用的回调函数。这个回调接收两个参数：新的值和旧的值。
- `options`（可选）：这是一个选项对象，包含以下选项：
- `{ deep }`：默认为`false`，如果设置为`true`，则将深度侦听表达式的变更（数组或对象内部的属性）。对于复杂结构的数据非常有用。
- `{ immediate }`：默认为`false`，如果设置为`true`，在初次创建时立即执行回调，而不仅仅是首次数据变化时。
- `{ user }`：默认为`false`，如果是`true`，表示回调是在异步任务完成后触发（如Promise），而不是同步。

例子：

// 监听`data.value`的变化
this.$watch('data.value', (newValue, oldValue) => {
  console.log(`新值：${newValue}, 旧值：${oldValue}`);
});

// 深度监听嵌套对象的变化
this.$watch('nestedObject', deepWatchCallback, { deep: true });

function deepWatchCallback(newVal, oldVal) {
  //...
}