Vue3 的 watchEffect 特性介绍

在 Vue3 的响应式系统中，watchEffect 是一个极为强大且实用的特性，它为开发者处理副作用操作提供了一种简洁高效的方式。

watchEffect 会自动跟踪其内部所使用的响应式数据依赖。当这些依赖发生变化时，它会自动重新执行回调函数。这意味着开发者无需手动指定依赖项，Vue 能够智能地检测到哪些数据被使用，进而在数据更新时触发相应操作，极大地简化了代码逻辑。

例如，在一个显示用户信息并根据用户状态进行不同操作的组件中，我们可能需要在用户信息或状态变化时重新获取数据并更新显示。使用 watchEffect，代码可以这样编写：

import { ref, watchEffect } from 'vue';

const userInfo = ref({ name: '', age: 0 });
const userStatus = ref('active');

watchEffect(() => {
    console.log('用户信息或状态变化了');
    // 在此处执行获取数据、更新 DOM 等副作用操作
    if (userStatus.value === 'active') {
        // 根据用户信息进行特定操作
    }
});

在这个例子中，无论 userInfo 还是 userStatus 发生改变，watchEffect 都会立即做出响应，执行回调函数中的代码。

watchEffect 还支持清除副作用。在回调函数中返回一个清理函数，这个清理函数会在副作用重新执行之前调用，常用于清理定时器、取消网络请求等场景。比如：

watchEffect((onInvalidate) => {
    const timer = setInterval(() => {
        console.log('定时执行');
    }, 1000);

    onInvalidate(() => {
        clearInterval(timer);
    });
});

这样，当 watchEffect 因依赖变化重新执行时，会先清除之前的定时器，避免内存泄漏。

Vue3 的 watchEffect 特性为开发者提供了便捷的响应式副作用处理机制，不仅减少了代码冗余，还提升了代码的可读性和可维护性。无论是简单的状态监听，还是复杂的副作用管理，watchEffect 都能发挥重要作用，助力开发者更高效地构建应用程序。