Vue 3的`watchEffect`与`watch`：如何处理副作用与依赖追踪？

Vue 3 中 watchEffect 与 watch: 副作用处理与依赖追踪深度解析

大家好！今天我们来深入探讨 Vue 3 中两个重要的响应式 API：watchEffect 和 watch。 这两个 API 都用于观察响应式数据的变化并执行副作用，但它们在依赖追踪和使用方式上存在关键差异。 掌握这些差异对于编写高效且可维护的 Vue 3 应用至关重要。

1. 核心概念：响应式与副作用

在深入 watchEffect 和 watch 之前，我们先回顾一下响应式系统和副作用这两个核心概念。

响应式系统： Vue 3 的核心是其响应式系统，它允许我们在数据发生变化时自动更新视图或其他依赖于该数据的部分。 通过 reactive、ref 等 API 创建的响应式对象，当其属性被访问或修改时，会通知所有依赖于该属性的“观察者”。

副作用： 副作用是指函数执行过程中对应用程序状态的任何修改，包括更新 DOM、发送网络请求、修改全局变量等等。 在 Vue 中，我们通常需要在响应式数据变化时执行这些副作用。

2. watchEffect：自动依赖追踪与立即执行

watchEffect 是一个用于自动追踪依赖并执行副作用的函数。 它的基本用法如下：

import { ref, watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {
  console.log('count 的值为:', count.value);
  // 这里可以执行其他副作用，例如更新 DOM、发送网络请求等
});

count.value++; // 这将触发 watchEffect 中的回调函数

关键特性：

• 自动依赖追踪： watchEffect 会在首次执行时自动追踪其回调函数中用到的所有响应式依赖。这意味着，只有当这些依赖发生变化时，回调函数才会重新执行。
• 立即执行： watchEffect 会在定义时立即执行一次回调函数。 这确保了副作用的初始状态是正确的。
• 停止观察： watchEffect 返回一个停止观察的函数，可以在不再需要观察时调用，以释放资源。

const stop = watchEffect(() => {
  console.log('count 的值为:', count.value);
});

// 在某个时刻停止观察
stop();

count.value++; // 这不会触发 watchEffect 中的回调函数

深入理解依赖追踪：

watchEffect 的依赖追踪机制非常智能。 它会追踪回调函数执行过程中实际访问的响应式属性。 例如：

import { ref, watchEffect } from 'vue';

const a = ref(1);
const b = ref(2);
const c = ref(3);

watchEffect(() => {
  if (a.value > 0) {
    console.log('a 大于 0, b 的值为:', b.value);
  } else {
    console.log('a 不大于 0, c 的值为:', c.value);
  }
});

a.value = -1; // 触发 watchEffect，打印 "a 不大于 0, c 的值为: 3"
b.value = 10; // 不触发 watchEffect，因为 if 条件不满足，b 没有被访问
c.value = 20; // 触发 watchEffect，打印 "a 不大于 0, c 的值为: 20"

在这个例子中，当 a.value 大于 0 时，watchEffect 只会追踪 b 的变化。 当 a.value 不大于 0 时，watchEffect 只会追踪 c 的变化。 b.value 的修改只有在 a.value 大于0 的情况下才会触发 watchEffect。

使用场景：

• 需要根据多个响应式数据的变化来执行副作用。
• 不需要显式指定依赖关系，让 Vue 自动追踪。
• 副作用需要在组件挂载时立即执行一次。

高级用法：watchEffect 的选项

watchEffect 还可以接受一个可选的选项对象，用于控制其行为。

• flush: 'pre' | 'post' | 'sync'：控制副作用的刷新时机。
  • 'pre' (默认值)：在组件更新之前刷新。
  • 'post'：在组件更新之后刷新。 这对于需要在 DOM 更新后执行副作用的情况非常有用。
  • 'sync'：同步刷新。 谨慎使用，因为它可能导致性能问题。

watchEffect(() => {
  // 在 DOM 更新后执行
  console.log('DOM 已更新');
}, { flush: 'post' });

• onTrack 和 onTrigger：用于调试依赖追踪过程。 它们分别在依赖被追踪和依赖被触发时调用。

watchEffect(() => {
  console.log('count 的值为:', count.value);
}, {
  onTrack(event) {
    console.log('依赖被追踪:', event.target, event.key);
  },
  onTrigger(event) {
    console.log('依赖被触发:', event.target, event.key);
  }
});

3. watch：显式依赖指定与更多控制

watch 提供了更细粒度的控制，允许我们显式指定要观察的响应式数据，并提供更多选项来定制副作用的执行方式。

基本用法：

watch 函数接受三个参数：

1. 要观察的源 (source)：可以是 ref、reactive 对象、getter 函数或一个包含多个源的数组。
2. 回调函数 (callback)：当源发生变化时执行。
3. 选项 (options)：用于配置 watch 的行为。

import { ref, watch } from 'vue';

const count = ref(0);

watch(
  count,
  (newValue, oldValue) => {
    console.log('count 的值从', oldValue, '变为', newValue);
  }
);

count.value++; // 这将触发 watch 中的回调函数

关键特性：

• 显式依赖指定： 可以精确控制要观察的响应式数据。 这对于避免不必要的副作用执行非常有用。
• 提供新值和旧值： 回调函数接收两个参数，分别是新的值和旧的值，方便进行比较和处理。
• 惰性执行： 默认情况下，watch 只会在源发生变化时执行回调函数。 可以通过 immediate: true 选项使其立即执行一次。
• 支持多种源类型： 可以观察 ref、reactive 对象、getter 函数或一个包含多个源的数组。
• 停止观察： 与 watchEffect 类似，watch 也返回一个停止观察的函数。

不同类型的源：

• ref：

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log('count 的值从', oldValue, '变为', newValue);
});

• reactive 对象：

import { reactive, watch } from 'vue';

const state = reactive({
  name: 'Alice',
  age: 30
});

watch(
  () => state.age, // 使用 getter 函数来访问 reactive 对象的属性
  (newValue, oldValue) => {
    console.log('age 的值从', oldValue, '变为', newValue);
  }
);

state.age++; // 触发 watch

注意: 直接将 reactive 对象作为 watch 的源是不推荐的。 这样做会导致深度监听，性能开销较大。 应该使用 getter 函数来访问 reactive 对象的特定属性。

• Getter 函数：

const a = ref(1);
const b = ref(2);

watch(
  () => a.value + b.value, // 计算属性
  (newValue, oldValue) => {
    console.log('a + b 的值从', oldValue, '变为', newValue);
  }
);

a.value++; // 触发 watch
b.value++; // 触发 watch

• 包含多个源的数组：

const a = ref(1);
const b = ref(2);

watch(
  [a, b],
  ([newA, newB], [oldA, oldB]) => {
    console.log('a 的值从', oldA, '变为', newA);
    console.log('b 的值从', oldB, '变为', newB);
  }
);

a.value++; // 触发 watch
b.value++; // 触发 watch

watch 的选项：

• immediate: boolean：是否在定义时立即执行一次回调函数。 默认为 false。

watch(
  count,
  (newValue, oldValue) => {
    console.log('count 的值为:', newValue);
  },
  { immediate: true } // 立即执行
);

• deep: boolean：是否深度监听对象内部的变化。 默认为 false。 谨慎使用，因为深度监听的性能开销较大。 通常情况下，应该避免直接观察 reactive 对象，而是使用 getter 函数来观察其特定属性。

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

watch(
  () => state.nested,
  (newValue, oldValue) => {
    console.log('nested 对象发生变化');
  },
  { deep: true } // 深度监听
);

state.nested.count++; // 触发 watch

• flush: 'pre' | 'post' | 'sync'：与 watchEffect 相同，控制副作用的刷新时机。
• onTrack 和 onTrigger：与 watchEffect 相同，用于调试依赖追踪过程。
• onInvalidate: (cleanup: () => void) => void: 注册一个清理函数。这个清理函数会在以下几种情况下被调用：
  • 当侦听器即将重新运行时：在源数据变化，侦听器即将再次触发之前。
  • 当侦听器停止时 (例如，如果它是在 setup() 中使用，并且组件被卸载时)。
    这个选项可以用来避免竞态条件 (race conditions) 和执行清理操作。

import { ref, watch } from 'vue';

const source = ref(0);

watch(source, (newValue, oldValue, onInvalidate) => {
  let timer = setTimeout(() => {
    console.log('异步操作完成，值为：', newValue);
  }, 1000);

  onInvalidate(() => {
    clearTimeout(timer);
    console.log('上一次的异步操作被取消');
  });
});

source.value++; // 触发 watch，上一次的定时器被清除，重新开始一个新的定时器
source.value++; // 再次触发 watch，再次清除上一次的定时器，重新开始一个新的定时器

在这个例子中，每次 source.value 发生变化时，都会启动一个新的定时器。 但是，在新的定时器启动之前，onInvalidate 中注册的清理函数会被调用，清除上一次的定时器。 这可以避免多个定时器同时运行，导致竞态条件。

使用场景：

• 需要精确控制要观察的响应式数据。
• 需要在源发生变化时执行复杂的逻辑，例如根据新值和旧值进行比较和处理。
• 需要在组件卸载时执行清理操作。
• 需要处理异步操作，避免竞态条件。

4. watchEffect vs watch: 差异对比

为了更好地理解 watchEffect 和 watch 的区别，我们将它们的关键特性进行对比：

特性	watchEffect	watch
依赖追踪	自动	显式
立即执行	是	否 (默认)
提供新值和旧值	否	是
源类型	回调函数中使用的响应式数据	ref、reactive 对象、getter 函数、数组
灵活性	较低，适用于简单的副作用	较高，适用于复杂的逻辑和异步操作
性能	通常更高效，因为只追踪实际使用的依赖	可能效率较低，如果深度监听或观察整个对象
适用场景	自动追踪依赖，需要立即执行的副作用	精确控制依赖，需要访问新值和旧值，异步操作等

5. 最佳实践与性能考量

• 优先使用 watchEffect： 如果只需要根据响应式数据的变化来执行简单的副作用，并且不需要显式指定依赖关系，那么 watchEffect 通常是更好的选择。 因为它可以自动追踪依赖，避免手动指定可能出现的错误，并且通常性能更高。

• 谨慎使用 deep: true： 深度监听的性能开销较大，应尽量避免使用。 如果需要监听对象内部的变化，可以考虑使用 getter 函数来观察其特定属性。

• 及时停止观察： 在不再需要观察时，及时调用 watchEffect 或 watch 返回的停止观察函数，以释放资源。 特别是在组件卸载时，一定要停止所有相关的观察，避免内存泄漏。

• 避免在 watch 回调函数中修改响应式数据： 在 watch 回调函数中修改响应式数据可能会导致无限循环或其他意外行为。 如果需要修改响应式数据，可以考虑使用 nextTick 或 flush: 'post' 选项来延迟执行。

• 理解 flush 选项的作用： 根据实际需求选择合适的 flush 选项。 如果需要在 DOM 更新后执行副作用，可以使用 flush: 'post'。 如果需要同步执行副作用，可以使用 flush: 'sync'，但要注意可能带来的性能问题。

6. 实例分析：一个实际应用场景

假设我们需要创建一个简单的搜索组件，当用户在输入框中输入内容时，自动发送网络请求来获取搜索结果。

使用 watchEffect：

<template>
  <input type="text" v-model="searchText">
  <ul>
    <li v-for="result in searchResults" :key="result.id">{{ result.name }}</li>
  </ul>
</template>

<script setup>
import { ref, watchEffect } from 'vue';

const searchText = ref('');
const searchResults = ref([]);

watchEffect(async () => {
  if (searchText.value.length > 2) {
    const response = await fetch(`/api/search?q=${searchText.value}`);
    searchResults.value = await response.json();
  } else {
    searchResults.value = [];
  }
});
</script>

在这个例子中，watchEffect 会自动追踪 searchText.value 的变化。 当 searchText.value 的长度大于 2 时，会发送网络请求来获取搜索结果，并将结果更新到 searchResults.value。

使用 watch：

<template>
  <input type="text" v-model="searchText">
  <ul>
    <li v-for="result in searchResults" :key="result.id">{{ result.name }}</li>
  </ul>
</template>

<script setup>
import { ref, watch } from 'vue';

const searchText = ref('');
const searchResults = ref([]);

watch(
  searchText,
  async (newValue) => {
    if (newValue.length > 2) {
      const response = await fetch(`/api/search?q=${newValue}`);
      searchResults.value = await response.json();
    } else {
      searchResults.value = [];
    }
  }
);
</script>

在这个例子中，我们显式指定要观察的源为 searchText。 当 searchText 的值发生变化时，会执行回调函数，发送网络请求来获取搜索结果。

在这个简单的例子中，watchEffect 和 watch 都可以实现相同的功能。 但是，如果我们需要在搜索结果为空时显示不同的提示信息，或者需要在组件卸载时取消未完成的网络请求，那么 watch 可能会更方便一些。

7. 深入理解响应式系统的底层机制

理解 watchEffect 和 watch 背后的响应式系统的底层机制，可以帮助我们更好地使用它们，并避免潜在的性能问题。

Vue 3 的响应式系统基于 Proxy 和 Reflect 实现。 当我们访问一个响应式对象的属性时，会触发 Proxy 的 get 陷阱，并将当前的“观察者”（例如 watchEffect 或 watch 的回调函数）添加到该属性的依赖列表中。 当我们修改一个响应式对象的属性时，会触发 Proxy 的 set 陷阱，并通知所有依赖于该属性的观察者。

watchEffect 的自动依赖追踪机制就是基于这个底层机制实现的。 当 watchEffect 的回调函数首次执行时，它会访问一些响应式属性，并将自身添加到这些属性的依赖列表中。 以后，当这些属性发生变化时，Vue 就会自动触发 watchEffect 的回调函数。

watch 的显式依赖指定机制也是基于这个底层机制实现的。 当我们使用 watch 来观察一个 ref 或 reactive 对象的属性时，Vue 会将 watch 的回调函数添加到该属性的依赖列表中。 以后，当该属性发生变化时，Vue 就会自动触发 watch 的回调函数。

通过理解响应式系统的底层机制，我们可以更好地理解 watchEffect 和 watch 的工作原理，并编写更高效且可维护的 Vue 3 应用。

两种 API 的总结

• watchEffect 自动追踪依赖，适合简单的副作用，性能通常更高。
• watch 可以精确控制依赖，适合复杂的逻辑和异步操作。
• 优先使用 watchEffect，谨慎使用 deep: true，及时停止观察。