vue3使用watchEffect

Vue 3中引入了一个新的API，即`watchEffect`，用于监视响应式数据的变化并执行相应的副作用函数。下面是使用`watchEffect`的介绍：

1. `watchEffect`的基本用法：
`watchEffect`接收一个函数作为参数，该函数中可以访问响应式数据，并在数据变化时执行相应的副作用操作。当响应式数据发生变化时，`watchEffect`会自动重新运行该函数。

   import { watchEffect } from 'vue';

   watchEffect(() => {
     // 在这里执行副作用操作
   });

2. 监视特定的响应式数据：
如果你只想监视特定的响应式数据，可以在`watchEffect`函数中直接访问它们。当这些数据发生变化时，副作用函数会被重新执行。

   import { reactive, watchEffect } from 'vue';

   const state = reactive({
     count: 0,
     message: 'Hello',
   });

   watchEffect(() => {
     console.log(state.count);
     console.log(state.message);
   });

3. 停止监视：
`watchEffect`返回一个停止监视的函数，可以在需要停止监视时调用。

   import { reactive, watchEffect } from 'vue';

   const state = reactive({
     count: 0,
   });

   const stop = watchEffect(() => {
     console.log(state.count);
   });

   // 停止监视
   stop();

4. 监视多个响应式数据：
如果你想同时监视多个响应式数据，可以在副作用函数中访问它们，并将它们作为依赖项传递给`watchEffect`。

   import { reactive, watchEffect } from 'vue';

   const state = reactive({
     count: 0,
     message: 'Hello',
   });

   watchEffect(() => {
     console.log(state.count);
     console.log(state.message);
   }, {
     flush: 'post',
     deep: true,
   });

在上面的示例中，`flush`选项设置为`post`，表示在DOM更新之后执行副作用函数。`deep`选项设置为`true`，表示深度监视响应式数据的变化。