深入了解【Vue3】的【watchEffect】

引言

在 Vue 3 中，watchEffect 是一个强大的响应式 API，它可以帮助开发者更轻松地处理副作用（side effects）。与传统的 watch 不同，watchEffect 自动追踪依赖，提供了更简洁和直观的用法。本文将深入探讨 watchEffect 的用法、特点以及在实际开发中的应用。

什么是 `watchEffect`？

watchEffect 是 Vue 3 中的一种用于响应式数据监听的 API。它会立即执行传入的回调函数，并在其依赖的响应式数据变化时重新执行该函数。

引入 `watchEffect`

在使用 watchEffect 之前，需要从 vue 包中引入它：

import { watchEffect } from 'vue';

`watchEffect` 的基本用法

创建一个简单的效果

使用 watchEffect，你可以轻松地创建副作用。例如，监测某个响应式数据的变化并做出相应的处理：

import { reactive, watchEffect } from 'vue';

const state = reactive({ count: 0 });

watchEffect(() => {
  console.log(`Count is: ${state.count}`);
});

// 修改 count 的值会触发副作用
state.count++;

在这个例子中，watchEffect 会立即执行，并在 state.count 变化时输出新的值。

延迟执行

watchEffect 会在其依赖的响应式数据变化后，延迟执行回调函数。这使得我们可以在状态变化时进行一些处理，而无需手动调用或管理依赖关系。

`watchEffect` 的特点

1. 自动追踪依赖

watchEffect 会自动追踪在回调函数中使用的响应式数据。你不需要显式地指定依赖项，这使得代码更简洁、更易读。

2. 响应式副作用

与 watch 不同，watchEffect 更加专注于副作用的处理。当依赖项变化时，watchEffect 会重新执行，确保你始终得到最新的状态。

3. 灵活性

watchEffect 可以与 reactive、ref 等响应式 API 结合使用，灵活处理不同的数据类型和结构。

`watchEffect` 的实际应用

1. 处理 DOM 更新

你可以使用 watchEffect 来直接更新 DOM，例如，在响应式数据变化时操作某个元素的样式或类名：

import { reactive, watchEffect } from 'vue';

const state = reactive({ isActive: false });

watchEffect(() => {
  const element = document.querySelector('.my-element');
  if (state.isActive) {
    element.classList.add('active');
  } else {
    element.classList.remove('active');
  }
});

2. 与 API 请求结合

在一些场景下，你可能需要根据响应式数据变化而发起 API 请求：

import { reactive, watchEffect } from 'vue';

const state = reactive({ userId: null, user: null });

watchEffect(async () => {
  if (state.userId) {
    const response = await fetch(`/api/users/${state.userId}`);
    state.user = await response.json();
  }
});

3. 计算属性的替代品

watchEffect 也可以用作计算属性的替代品，特别是在需要执行副作用的场景下：

import { reactive, watchEffect } from 'vue';

const state = reactive({ a: 1, b: 2, sum: 0 });

watchEffect(() => {
  state.sum = state.a + state.b;
});

注意事项

清理副作用：在某些情况下，watchEffect 可能需要清理之前的副作用。你可以在回调中返回一个清理函数：

watchEffect(() => {
  const timer = setTimeout(() => {
    console.log('Timer executed');
  }, 1000);

  return () => clearTimeout(timer);
});

避免不必要的计算：虽然 watchEffect 自动追踪依赖，但在某些情况下，可能会导致不必要的计算。确保在回调中只引用需要的响应式数据，以提高性能。