vue3+watch

在Vue 3中，`watch` 是用于监听响应式数据变化的一种方法。它允许你在数据变化时执行一些操作，例如更新组件、触发计算属性或执行异步任务等。

使用 `watch` 的基本语法如下：

watch(
  callback: () => void,
  options: {
    deep?: boolean,
    immediate?: boolean,
    handler: () => void
  }
)

参数说明：

* `callback`：一个函数，当响应式数据发生变化时会被调用。
* `options`：可选参数，用于指定观察选项。
+ `deep`：一个布尔值，指定是否深度监听对象的变化。默认为 `false`，只监听基本类型（如字符串、数字、布尔值）的变化。如果设置为 `true`，则将深度监听对象及其属性。
+ `immediate`：一个布尔值，指定是否立即执行回调函数。默认为 `false`，只有在第一次观察时才会执行。如果设置为 `true`，则在数据首次变化时立即执行回调函数。
* `handler`：回调函数内部的代码，当响应式数据发生变化时会被执行。

使用 `watch` 的示例代码：

import { ref, watch } from 'vue';

const count = ref(0);
const multiplier = 2;

watch(() => count, (newCount) => {
  console.log(`Count changed to ${newCount}`);
  console.log(`Multiplier is ${multiplier}`);
  console.log(`New value: ${newCount * multiplier}`);
});

// 在此处修改 count 的值以触发回调函数
count.value = 5; // 输出: Count changed to 5, Multiplier is 2, New value: 10

在上面的示例中，我们使用 `watch` 监听 `count` 响应式数据的变化，并在每次变化时执行回调函数。回调函数中输出了当前计数、乘数和新值。

需要注意的是，从Vue 3开始，推荐使用 `setup` 函数和 `onMounted`、`onUpdated`等生命周期钩子函数来代替旧版本的 `watch` 方法。这样可以更好地管理组件的状态和行为，提高代码的可维护性和可读性。