vue3watch和watcheffect使用

在Vue 3中，`watch` 和 `watchEffect` 都是用来监听数据变化并执行某些操作的工具，它们的区别在于：

1. **watch**：
- `watch` 是一种基础的响应式监听器，它可以监听一个或多个属性，并在其值发生变化时执行回调函数。它的返回值可以是一个函数用于取消观察，或者直接是一个表达式（它会被计算并在每次依赖变更时更新）。
- 示例：

     watch(obj, (newVal) => {
       console.log('obj updated:', newVal);
     }, { immediate: true }); // 可以立即执行一次

2. **watchEffect**：
- `watchEffect` 是从 Composition API 引入的，它是副作用管理的一部分，主要用于异步操作如网络请求、定时器等，提供更好的控制性和性能优化。`watchEffect` 在组件卸载时会自动清除，无需手动取消，因此它通常配合 `reactive` 或 `ref` 使用。
- 示例：

     import { ref, watchEffect } from 'vue';

     const user = ref(null);

     watchEffect(async () => {
       if (user.value) {
         await fetchUser(user.value.id);
       }
     });