Vue3 中 watchEffect 函数深度剖析：详解 Vue3 响应式使用

在 Vue3 的响应式系统中，watchEffect 函数是一个强大且灵活的工具，为开发者处理数据变化提供了极大便利。

watchEffect 函数会立即执行传入的一个函数，并响应式追踪其依赖，在依赖变更时重新执行该函数。简单来说，它能自动追踪到函数内部所使用的响应式数据，一旦这些数据发生变化，就会触发回调函数的重新执行。

比如，我们有一个响应式数据 count，使用 watchEffect 可以这样做：

import { ref, watchEffect } from 'vue';
const count = ref(0);
watchEffect(() => {
    console.log(`Count is: ${count.value}`);
});
count.value++;

在上述代码中，watchEffect 立即执行了回调函数，打印出初始的 count 值。当 count 的值增加时，由于 watchEffect 自动追踪到了 count 这个依赖，回调函数会再次执行，打印出新的 count 值。

与 watch 函数不同，watch 更侧重于监听特定的数据源变化，需要明确指定要监听的响应式数据。而 watchEffect 则是自动收集依赖，无需开发者手动指定。这使得代码在处理多个相关数据变化时更加简洁。

watchEffect 还有一个重要特性是可以处理副作用。比如，在数据变化时进行网络请求、更新 DOM 等操作。例如：

const data = ref(null);
watchEffect(async () => {
    try {
        const response = await fetch('https://example.com/api/data');
        data.value = await response.json();
    } catch (error) {
        console.error('Error fetching data:', error);
    }
});

这里，当响应式数据（可能是触发网络请求的条件数据）发生变化时，watchEffect 会重新执行，发起新的网络请求并更新数据。

不过，在使用 watchEffect 时也需要注意一些问题。由于它自动追踪依赖，可能会导致意外的重新执行。所以在编写回调函数时，要确保函数内部的逻辑清晰，避免不必要的依赖。

Vue3 的 watchEffect 函数为响应式编程带来了全新的思路和方式，熟练掌握它能极大提升开发效率，让我们更优雅地处理数据变化和副作用。