watchEffect的使用

watchEffect 是 Vue 3 Composition API 中的一个函数，它用于在响应式数据变化时自动执行一个副作用函数。与 watch 不同，watchEffect 会自动收集其执行过程中访问到的响应式依赖，并在这些依赖发生变化时重新运行副作用函数。这意味着你不需要显式指定要监听哪些依赖，Vue 会自动为你处理。

以下是 watchEffect 的一些主要特点和用法：

1. 自动依赖收集：当你调用 watchEffect 时，Vue 会开始追踪你在副作用函数中访问的所有响应式数据。一旦这些数据发生变化，副作用函数会自动重新执行。

2. 立即执行：与 watch 不同，watchEffect 在创建时会立即执行一次副作用函数，以捕获初始状态。

3. 响应式清理：如果副作用函数返回一个函数，那么这个返回的函数会在组件卸载或重新渲染时作为清理函数被调用。这可以用于清理副作用，如取消定时器或解绑事件监听器。

4. 停止观察：watchEffect 返回一个停止观察的函数，你可以调用这个函数来停止副作用的执行和依赖的收集。

下面是一个使用 watchEffect 的简单示例：

import { ref, watchEffect } from 'vue';  
  
export default {  
  setup() {  
    const count = ref(0);  
  
    // 使用 watchEffect 来观察 count 的变化  
    watchEffect(() => {  
      console.log(`count 的当前值是: ${count.value}`);  
    });  
  
    // 修改 count 的值将触发 watchEffect 中的副作用函数重新执行  
    function increment() {  
      count.value++;  
    }  
  
    return {  
      count,  
      increment  
    };  
  }  
};

在这个例子中，每当 count 的值发生变化时，watchEffect 中的函数都会自动执行，并在控制台中打印出 count 的当前值。

需要注意的是，由于 watchEffect 会自动收集依赖，所以如果在副作用函数中访问了多个响应式数据，那么当这些数据中的任何一个发生变化时，副作用函数都会重新执行。这可能导致不必要的重渲染或计算，特别是在处理复杂逻辑或性能敏感的应用时。在这种情况下，使用 watch 并显式指定要观察的依赖可能更为合适。