vue3中的watch与watchEffect

在Vue 3中，`watch` 和 `watchEffect` 都是用于响应式监听数据变化的工具，但它们的作用和使用场景略有不同：

1. **watch**:
- 它是一个函数，可以接受两个参数：一个表达式或计算属性（`getter`），以及一个回调函数（`handler`）。当`getter`返回的结果改变时，`handler`会被自动调用。另外，它还可以接收第三个可选参数，用于配置选项，如深度观察（deep）和 immediate（立即触发初始化）。
- 例子：

   watch(data, (newVal, oldVal) => {
     console.log('data changed', newVal);
   });

- 使用场景：当你需要在某个值发生变化时立即执行特定操作，而且不需要副作用处理（如更新DOM等）。

2. **watchEffect**:
- 实际上，这是基于反应式API的`ref`和`reactive`提供的更高级功能，它是`setup`生命周期钩子里的一部分。`watchEffect`主要用于注册副作用，比如设置定时器、订阅网络事件等，这些操作通常涉及异步操作或副作用管理。
- 例子：

   import { onMounted, watchEffect } from 'vue';

   setup() {
     const count = ref(0);

     watchEffect(() => {
       // 当count变化时，清理旧的计时器并创建新的
       clearTimeout(countTimer);
       countTimer = setTimeout(() => {
         count.value++;
       }, 1000);
     });

     return { count };
   }

- 使用场景：当你需要监听并管理和清除可能有副作用的周期性任务时，如定时器或者debounce操作。