vue3的watch监听

在 Vue 3 中，`watch` 方法的使用方式与 Vue 2 有一些不同。在 Vue 3 中，`watch` 方法有两种使用方式：基于 `ref` 和基于 `reactive`。

1. 基于 `ref`：

   import { ref, watch } from 'vue';

   const myData = ref(0);

   watch(myData, (newValue, oldValue) => {
     // 监听 myData 的变化，并在变化时执行回调函数
     console.log(`myData 变为 ${newValue}`);
   });

2. 基于 `reactive`：

   import { reactive, watch } from 'vue';

   const myData = reactive({
     count: 0,
     name: 'John',
   });

   watch(() => myData.count, (newValue, oldValue) => {
     // 监听 myData.count 的变化，并在变化时执行回调函数
     console.log(`myData.count 变为 ${newValue}`);
   });

在上述示例中，我们可以看到 `watch` 方法的第一个参数可以是一个响应式对象或一个返回响应式对象的函数。第二个参数是一个回调函数，用于处理变化时的逻辑。回调函数接收两个参数：新值和旧值。

除了基本的用法外，`watch` 方法还支持传递一些选项参数，例如 `immediate`、`deep` 等，用于控制监听行为的细节。你可以查阅 Vue 3 官方文档以了解更多详细信息。