如何使用 Vue 3 中的 watch 和 watchEffect？

Vue.js 是现代前端开发中非常流行的框架之一，其新版本 Vue 3 带来了许多强大的功能和改进。其中，响应式系统得到了显著的增强，watch 和 watchEffect 就是两个用于响应性编程的重要工具。在这篇文章中，我们将深入探讨如何在 Vue 3 中使用 watch 和 watchEffect，并通过实例代码帮助你更好地理解它们的应用场景。

一、介绍 Vue 3 的响应式系统

在 Vue 3 中，响应式系统允许我们声明性地绑定数据和 DOM，当数据变化时，DOM 也会自动更新。为了实现这一点，Vue 提供了 reactive 和 ref API，分别用于创建响应式对象和响应式基本类型值。在这些基础之上，我们可以使用 watch 和 watchEffect 来监听数据的变化并执行相应的逻辑。

二、watch 的使用

watch 是 Vue 3 提供的一种用于监听响应式数据变化的工具。在某些场景下，我们可能需要在特定数据变化时执行一些额外的逻辑，watch 就是为此而生的。我们可以使用 watch 来监听单个或者多个响应式数据的变化。

基本语法

import { reactive, watch } from 'vue';

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

watch(
  () => state.count,
  (newValue, oldValue) => {
    console.log(`Count changed from ${oldValue} to ${newValue}`);
  }
);

实例解析

import { createApp, reactive, watch } from 'vue';

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

    // 监听 count 值的变化
    watch(
      () => state.count,
      (newValue, oldValue) => {
        console.log(`Count changed from ${oldValue} to ${newValue}`);
        alert(`Count changed from ${oldValue} to ${newValue}`);
      }
    );

    // 模拟点击按钮以改变 count 的值
    const increment = () => {
      state.count += 1;
    };

    return {
      state,
      increment,
    };
  },
  template: `
    <div>
      <p>Count: {{ state.count }}</p>
      <button @click="increment">Increment</button>
    </div>
  `,
};

createApp(App).mount('#app');

在这个例子中，我们通过 reactive 创建了一个响应式对象 state，其中包含一个 count 属性。随后，我们使用 watch 来监听 state.count 的变化。当 count 发生变化时，回调函数会打印出新值和旧值并弹出提示。同时，通过 increment 函数，我们可以通过点击按钮来改变 count 的值。

三、watchEffect 的使用

watchEffect 是 Vue 3 中另一个非常有用的 API。与 watch 不同，watchEffect 是自动追踪依赖的，它会在其所依赖的响应式数据变化时自动执行一次，同时也会在组件卸载时自动清理。这使得 watchEffect 非常适合用于一些较为简单的场景，例如日志记录和数据同步。

基本语法

import { reactive, watchEffect } from 'vue';

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

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

实例解析

import { createApp, reactive, watchEffect } from 'vue';

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

    // 使用 watchEffect 自动追踪 count 的变化
    watchEffect(() => {
      console.log(`Count is now: ${state.count}`);
      document.title = `Count: ${state.count}`;
    });

    // 模拟点击按钮以改变 count 的值
    const increment = () => {
      state.count += 1;
    };

    return {
      state,
      increment,
    };
  },
  template: `
    <div>
      <p>Count: {{ state.count }}</p>
      <button @click="increment">Increment</button>
    </div>
  `,
};

createApp(App).mount('#app');

在这个例子中，我们同样通过 reactive 创建了一个响应式对象 state，并监听 state.count 的变化。然而，与 watch 不同的是，这里我们使用了 watchEffect。每当 count 发生变化时，回调函数会自动执行并更新页面标题。

与 watch 相比，watchEffect 的优势在于它不需要手动指定依赖，当依赖的响应式数据发生变化时，它会自动重新执行；这使得它非常适合用于处理简单的、副作用较少的逻辑。

四、watch 和 watchEffect 的区别

虽然 watch 和 watchEffect 都可以用于监听响应式数据的变化，但两者之间还是有一些区别：

1. 依赖追踪方式：watch 需要手动指定依赖，而 watchEffect 会自动追踪响应式依赖。这使得 watchEffect 更加自动化，但也更容易引入一些意外的副作用。
2. 使用场景：watch 更适合用于需要明确控制依赖关系的复杂逻辑，而 watchEffect 更适合用于简单的副作用管理，尤其是在 setup 函数内部。
3. 回调参数：watch 的回调函数接收新值和旧值两个参数，而 watchEffect 的回调函数没有参数，因为它关注的是整个副作用的执行过程。

五、何时选择 watch，何时选择 watchEffect

1. 选择 watch：当你需要在某个具体的数据变化时执行特定的操作，并且需要访问旧值和新值时，可以选择 watch。例如，数据的验证、API 请求等场景。
2. 选择 watchEffect：当你需要根据多种响应式数据的变化进行综合处理，并且这种处理不依赖于旧值和新值的对比时，可以选择 watchEffect。例如，简单的日志记录、DOM 操作等场景。

通过这篇文章，我们深入探索了 Vue 3 中的 watch 和 watchEffect 的使用方法和应用场景。希望这些内容能够帮助你在前端开发中更加灵活地使用 Vue 3 的响应式系统，从而编写出更加清晰、高效的代码。无论是处理复杂逻辑还是简单的副作用管理，Vue 3 都为我们提供了强大的工具，让我们能够更好地实现各种需求。