Vue 3 中 `watch` 和 `watchEffect` 的区别是什么？

在 Vue 3 的组合式 API 中，watch 和 watchEffect 是处理响应式数据变化的两大核心工具。尽管二者都能实现数据监听与副作用执行，但设计哲学与使用场景存在本质差异。本文将从底层原理、核心特性、性能优化及典型场景等维度展开深度对比，帮助开发者精准选择工具。

一、底层原理：响应式追踪的两种范式

1. watch：静态依赖分析

watch 采用显式声明式的依赖追踪机制。开发者需通过第一个参数明确指定要监听的数据源（如 ref、reactive 对象或 getter 函数），Vue 仅在声明时建立的静态依赖关系发生变化时触发回调。例如：

1const count = ref(0);
2watch(count, (newVal, oldVal) => {
3  console.log(`Count changed from ${oldVal} to ${newVal}`);
4});
5

此例中，watch 仅监听 count.value 的变化，即使回调函数中访问其他响应式数据，也不会触发额外追踪。

2. watchEffect：动态依赖收集

watchEffect 基于动态环境感知的响应式系统。其回调函数内访问的所有响应式数据会被自动收集为依赖，形成动态依赖图。当图中任意节点变化时，整个副作用函数会重新执行：

1const count = ref(0);
2const name = ref('Vue');
3watchEffect(() => {
4  console.log(`Count: ${count.value}, Name: ${name.value}`);
5});
6

此处无需显式声明依赖，count 和 name 的变化均会触发回调。

二、核心特性对比：功能与行为的差异

关键差异解析

1. 依赖追踪的精确性
   watch 的静态依赖分析使其能精确控制触发条件。例如，监听对象属性时：
   javascript

   1const user = reactive({ name: 'Alice', age: 25 });
   2watch(() => user.name, (newName) => {
   3  console.log(`Name changed to ${newName}`);
   4});
   5

   仅当 user.name 变化时触发，而 user.age 的修改不会影响回调。

   watchEffect 则可能因动态依赖导致意外触发。例如：

   javascript

   1watchEffect(() => {
   2  if (user.age > 30) {
   3    console.log(`Adult: ${user.name}`);
   4  }
   5});
   6

   此处依赖包括 user.age 和 user.name，任一变化均会重新执行。

2. 性能优化空间
   watch 的显式声明允许 Vue 跳过无关数据的检查，适合复杂对象或高频更新场景。而 watchEffect 的动态依赖可能导致不必要的回调执行，需通过条件分支或拆分函数优化。

三、高级特性与最佳实践

1. watch 的深度控制

• 深度监听对象：
  默认情况下，watch 对 reactive 对象进行浅监听。若需监听嵌套属性变化，需配置 { deep: true }：
  javascript

  1watch(user, (newUser) => {
  2  console.log('User data updated:', newUser);
  3}, { deep: true });
  4

• 立即执行与一次性监听：
  通过 { immediate: true } 在初始化时触发回调，或 { once: true } 仅监听一次变化：
  javascript

  1const count = ref(0);
  2watch(count, (newVal) => {
  3  console.log('Count updated:', newVal);
  4}, { immediate: true, once: true });
  5

2. watchEffect 的副作用管理

• 清理异步操作：
  使用 onInvalidate 注册清理函数，避免内存泄漏：
  javascript

  1watchEffect((onInvalidate) => {
  2  const timer = setTimeout(() => {
  3    console.log('Delayed log:', count.value);
  4  }, 1000);
  5  onInvalidate(() => clearTimeout(timer));
  6});
  7

• 控制执行时机：
  通过 flush 选项调整回调执行阶段：
  • 'pre'：DOM 更新前执行（默认）。
  • 'post'：DOM 更新后执行。
  • 'sync'：同步执行（慎用，可能引发性能问题）。
  javascript

  1watchEffect(() => {
  2  console.log('DOM updated:', mainRef.value?.innerText);
  3}, { flush: 'post' });
  4

四、典型场景与选型建议

1. 优先选择 watch 的场景

• 需要对比新旧值：如表单验证、数据联动逻辑。
  javascript

  1watch(password, (newVal, oldVal) => {
  2  if (newVal !== oldVal && newVal.length < 6) {
  3    showError('Password must be at least 6 characters');
  4  }
  5});
  6

• 精确控制触发条件：如仅监听对象特定属性。
  javascript

  1watch(() => user.address.city, (newCity) => {
  2  fetchWeather(newCity);
  3});
  4

• 高频更新优化：通过节流或防抖减少回调执行次数。
  javascript

  1import { throttle } from 'lodash-es';
  2watch(searchQuery, throttle((newQuery) => {
  3  fetchResults(newQuery);
  4}, 300));
  5

2. 优先选择 watchEffect 的场景

• 动态依赖逻辑：如根据条件组合多个数据源。
  javascript

  1watchEffect(() => {
  2  if (user.role === 'admin') {
  3    showAdminPanel(user.permissions);
  4  } else {
  5    hideAdminPanel();
  6  }
  7});
  8

• 简化 DOM 操作：如自动更新页面标题或元信息。
  javascript

  1watchEffect(() => {
  2  document.title = `User: ${user.name} | ${appName}`;
  3});
  4

• 快速原型开发：减少样板代码，提升开发效率。

五、避坑指南与性能优化

1. 避免在 watchEffect 中修改依赖：
   可能导致无限循环。例如：
   javascript

   1// 错误示例：循环触发
   2watchEffect(() => {
   3  count.value++; // 修改依赖的响应式数据
   4});
   5

2. 异步操作的依赖追踪：
   watchEffect 仅追踪同步代码中的响应式数据。若需追踪异步操作中的变化，需将依赖提取到同步部分：
   javascript

   1// 错误示例：异步内依赖不会触发更新
   2watchEffect(async () => {
   3  await fetchData();
   4  console.log(count.value); // 仅初始化时执行一次
   5});
   6
   7// 正确做法：将依赖提取到同步部分
   8watchEffect(() => {
   9  const currentCount = count.value;
   10  fetchData().then(() => {
   11    console.log('Data fetched for count:', currentCount);
   12  });
   13});
   14

3. 合理使用 flush: 'sync'：
   同步执行会阻塞渲染，仅在绝对必要时使用（如与第三方库集成）。

六、总结：选择工具的核心原则

• 精确控制需求：若需明确监听特定数据、对比新旧值或优化性能，选择 watch。
• 快速响应变化：若依赖关系复杂、需自动追踪或简化代码，选择 watchEffect。
• 组合使用：复杂场景中可混合使用二者。例如，用 watchEffect 处理动态 UI，用 watch 管理异步请求。

Vue 3 的响应式系统为开发者提供了灵活的工具链。理解 watch 与 watchEffect 的本质差异，结合具体场景选择合适方案，方能构建高效、可维护的应用。