解释 Vue 3 源码中 `watch` 和 `watchEffect` 的实现差异，以及它们在依赖收集和副作用执行上的不同策略。

Vue 3 源码漫游：Watch 和 WatchEffect 的爱恨情仇

大家好，欢迎来到今天的 Vue 3 源码漫游之旅！我是你们的导游，今天咱们要探索 Vue 3 中两个强大的响应式工具：watch 和 watchEffect。 它们都用于监听响应式数据的变化并执行副作用，但它们之间的差异却非常微妙，理解这些差异能让你在 Vue 开发中更加游刃有余。

准备好了吗？ 让我们系好安全带，开始深入 watch 和 watchEffect 的内部世界吧！

第一幕：响应式世界的基石 – 依赖收集

要理解 watch 和 watchEffect，首先要理解 Vue 3 响应式系统的核心：依赖收集。 简单来说，依赖收集就是 Vue 追踪哪些响应式数据被组件或函数使用了的过程。 当这些响应式数据发生变化时，Vue 就能精确地通知那些依赖于它们的组件或函数进行更新。

在 Vue 3 中，这个依赖收集的核心机制由 track 和 trigger 函数来实现。

• track(target, type, key): 当读取响应式对象 target 的属性 key 时，track 函数会被调用。 它会将当前正在执行的 effect (例如，组件的渲染函数、watch 回调或 watchEffect 回调) 注册为 target[key] 的依赖。 type 通常是 GET。

• trigger(target, type, key, newValue, oldValue): 当设置响应式对象 target 的属性 key 时，trigger 函数会被调用。 它会找到所有依赖于 target[key] 的 effect，并触发它们重新执行。 type 通常是 SET。

好，有了这个基础，我们就可以开始分析 watch 和 watchEffect 的源码实现了。

第二幕：watchEffect – 盲盒式监听

watchEffect 是一个“即时满足”的函数。 它会立即执行传入的回调函数，并在执行过程中自动追踪所有被访问的响应式依赖。 这就像打开一个盲盒，你不知道里面有什么，但你打开了，就必须接受它。

让我们来看一下 watchEffect 的简化版实现（为了便于理解，我省略了一些细节）：

function watchEffect(effect, options = {}) {
  let active = true;
  let cleanup; // 用于存储清理函数

  const job = () => {
    if (!active) {
      return;
    }

    cleanup && cleanup(); // 执行上一次的清理函数

    const onInvalidate = (fn) => {
      cleanup = fn; // 存储清理函数，在下次执行前调用
    };

    try {
      currentEffect = job; // 标记当前正在执行的 effect
      effect(onInvalidate); // 执行 effect 回调
    } finally {
      currentEffect = null; // 清空当前 effect
    }
  };

  job(); // 立即执行一次

  return () => {
    active = false; // 停止监听
  };
}

let currentEffect = null; // 用于跟踪当前执行的 effect

function track(target, type, key) {
  if (currentEffect) {
    // 将当前的 effect 添加到 target[key] 的依赖列表中
    // (省略具体实现，依赖列表通常是一个 Set)
    console.log(`Tracking ${key} for effect`);
  }
}

// 模拟响应式数据
const state = reactive({ count: 0 });

// 使用 watchEffect
const stop = watchEffect((onInvalidate) => {
  console.log(`Count is: ${state.count}`);

  // 清理函数，在 effect 重新执行前调用
  onInvalidate(() => {
    console.log('Cleanup called!');
  });
});

// 修改响应式数据
state.count++;
state.count++;

// 停止监听
stop();

state.count++; // 不会触发 effect，因为已经停止监听

代码解释：

1. watchEffect(effect, options): 接收一个 effect 回调函数和一个可选的 options 对象。
2. job(): watchEffect 的核心是一个 job 函数。 它负责执行 effect 回调，并在执行前后进行一些准备和清理工作。
3. cleanup: 用于存储清理函数。 每次 effect 重新执行前，都会先调用上一次的清理函数。
4. onInvalidate(fn): 允许 effect 回调注册一个清理函数。
5. currentEffect: 一个全局变量，用于跟踪当前正在执行的 effect。 这对于 track 函数来说至关重要，因为它需要知道哪个 effect 应该被添加到依赖列表中。
6. track(target, type, key): 当 effect 回调中访问响应式数据时，track 函数会被调用，将当前的 effect 添加到该数据的依赖列表中。

重点总结：

• 立即执行： watchEffect 会立即执行传入的回调函数。
• 自动追踪： 它会自动追踪回调函数中访问的所有响应式依赖。
• 清理函数： 允许注册清理函数，在下次执行前调用，用于清除副作用。
• 依赖收集： 依赖收集发生在回调函数执行期间。

watchEffect 的优点：

• 简单易用： 无需手动指定监听的依赖，非常方便。
• 自动更新： 只要回调函数中访问的响应式数据发生变化，就会自动触发更新。

watchEffect 的缺点：

• 过度监听： 可能会监听一些不必要的依赖，导致不必要的更新。
• 初始执行： 即使依赖数据没有变化，也会在组件初始化时执行一次。
• 性能问题： 由于依赖收集的盲目性，在大型组件中可能导致性能问题，因为会追踪不必要的依赖。

第三幕：watch – 精准制导的监听

与 watchEffect 不同，watch 允许你明确指定要监听的响应式数据源。 这就像配备了精确制导武器，你可以准确地打击目标，避免误伤。

让我们来看一下 watch 的简化版实现：

function watch(source, cb, options = {}) {
  let getter;
  if (typeof source === 'function') {
    getter = source;
  } else {
    getter = () => traverse(source); // 递归访问所有属性，触发依赖收集
  }

  let oldValue;
  let newValue;
  let cleanup;
  let active = true;

  const job = () => {
    if (!active) {
      return;
    }

    cleanup && cleanup();

    try {
      newValue = getter();
      cb(newValue, oldValue, (fn) => {
        cleanup = fn;
      });
      oldValue = newValue;
    } finally {
      currentEffect = null;
    }
  };

  // 初次执行，获取初始值
  oldValue = getter();

  // 创建一个响应式 effect
  const runner = effect(job, {
    lazy: true, // 延迟执行
    scheduler: () => {
      job(); // 当依赖发生变化时，触发 job 函数
    },
  });

  // 立即执行一次，触发依赖收集
  if (!options.lazy) {
    job();
  }

  return () => {
    active = false;
  };
}

// 递归访问对象的所有属性，触发依赖收集
function traverse(value) {
  if (typeof value === 'object' && value !== null) {
    for (const key in value) {
      traverse(value[key]);
    }
  }
  return value;
}

// 模拟响应式数据
const state = reactive({
  count: 0,
  nested: {
    value: 'hello',
  },
});

// 使用 watch
const stopWatch = watch(
  () => state.count,
  (newValue, oldValue, onCleanup) => {
    console.log(`Count changed from ${oldValue} to ${newValue}`);
    onCleanup(() => {
      console.log('Watch cleanup called!');
    });
  },
  { immediate: true }
);

state.count++;
state.nested.value = 'world'; // 不会触发 watch，因为没有监听 nested.value

stopWatch();
state.count++; // 不会触发 watch，因为已经停止监听

代码解释：

1. watch(source, cb, options): 接收三个参数：
   • source: 要监听的数据源。 可以是一个响应式对象、一个 getter 函数或一个包含多个响应式数据的数组。
   • cb: 回调函数，当监听的数据源发生变化时执行。
   • options: 可选的配置项，例如 immediate (是否立即执行回调) 和 deep (是否深度监听)。
2. getter: 一个函数，用于获取要监听的值。 如果 source 是一个函数，则直接使用它； 否则，使用 traverse 函数递归访问 source 的所有属性，触发依赖收集。
3. effect(job, options): 使用 effect 函数创建一个响应式的 effect。 lazy: true 表示 effect 延迟执行，只有当依赖发生变化时才会执行。 scheduler 选项允许自定义 effect 的执行时机。
4. traverse(value): 递归访问对象的所有属性，这对于确保所有相关的响应式依赖都被追踪非常重要。

重点总结：

• 精准监听： 可以明确指定要监听的依赖，避免过度监听。
• 延迟执行： 默认情况下，回调函数不会立即执行，只有当监听的依赖发生变化时才会执行。
• immediate 选项： 可以通过设置 immediate: true 来立即执行回调函数。
• deep 选项： 可以通过设置 deep: true 来深度监听对象的所有属性。
• 手动依赖收集： 依赖收集的方式取决于 source 的类型。如果是函数，依赖收集发生在函数执行期间，如果是对象，则使用 traverse 触发依赖收集。

watch 的优点：

• 可控性强： 可以精确控制要监听的依赖，避免不必要的更新。
• 性能优化： 由于只监听必要的依赖，可以提高性能。
• 灵活性高： 可以监听单个响应式数据、getter 函数或包含多个响应式数据的数组。

watch 的缺点：

• 需要手动指定依赖： 相比 watchEffect，使用起来稍微复杂一些。
• 容易出错： 如果忘记指定依赖，可能导致无法正确监听数据变化。

第四幕：依赖收集策略的对比

现在，让我们来深入探讨 watch 和 watchEffect 在依赖收集策略上的不同之处。

特性	watchEffect	watch
依赖收集方式	自动追踪回调函数中访问的所有响应式依赖	需要手动指定要监听的依赖。 如果 source 是一个函数，则依赖收集发生在函数执行期间； 如果 source 是一个对象，则使用 traverse 触发依赖收集。
执行时机	立即执行回调函数，并在执行过程中进行依赖收集	默认情况下，回调函数不会立即执行，只有当监听的依赖发生变化时才会执行。 可以通过设置 immediate: true 来立即执行回调函数。
依赖关系	隐式依赖关系，依赖关系在运行时确定	显式依赖关系，依赖关系在代码中明确指定
适用场景	适合于需要自动追踪依赖的简单场景，例如更新组件的样式	适合于需要精确控制依赖的复杂场景，例如监听特定的数据变化并执行特定的操作。 当你明确知道需要监听哪些数据时，watch 是更好的选择。 例如，监听一个表单输入框的值，或者监听一个计算属性的结果。当你不太清楚需要监听哪些数据，或者需要监听的数据会动态变化时，watchEffect 可能是更好的选择。 例如，根据多个响应式数据动态更新一个图表。

一个形象的比喻：

• watchEffect 就像一个贪吃的孩子，看到什么都想吃，结果可能吃坏肚子（过度监听，导致性能问题）。
• watch 就像一个挑食的孩子，只吃自己喜欢的东西，但也能保证营养均衡（精确监听，避免不必要的更新）。

第五幕：副作用执行的差异

除了依赖收集，watch 和 watchEffect 在副作用执行方面也存在一些差异。

• watchEffect： 每次执行回调函数前，都会先执行上一次的清理函数。 这对于清除副作用非常重要，例如取消定时器、移除事件监听器等。
• watch： 回调函数接收第三个参数 onCleanup，允许你注册一个清理函数。 这个清理函数也会在下次执行回调函数前被调用。

清理函数的重要性：

清理函数可以防止内存泄漏和意外行为。 例如，如果你在 watchEffect 或 watch 回调函数中创建了一个定时器，但没有在清理函数中清除它，那么每次回调函数重新执行时，都会创建一个新的定时器，导致多个定时器同时运行，最终可能导致内存泄漏。

一个例子：

<template>
  <div>
    <p>Count: {{ count }}</p>
  </div>
</template>

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

const count = ref(0);

// 使用 watchEffect
watchEffect((onInvalidate) => {
  const timer = setInterval(() => {
    count.value++;
  }, 1000);

  onInvalidate(() => {
    clearInterval(timer);
    console.log('watchEffect timer cleared!');
  });
});

// 使用 watch
watch(
  count,
  (newValue, oldValue, onCleanup) => {
    console.log(`Count changed from ${oldValue} to ${newValue}`);
    onCleanup(() => {
      console.log('watch timer cleared!');
    });
  }
);
</script>

在这个例子中，watchEffect 和 watch 都使用 setInterval 创建了一个定时器。 当组件卸载时，onInvalidate 和 onCleanup 函数会被调用，清除定时器，防止内存泄漏。

第六幕：最佳实践

了解了 watch 和 watchEffect 的差异后，我们就可以根据不同的场景选择合适的工具。

• 使用 watchEffect 的场景：

  • 需要自动追踪依赖的简单场景。
  • 不需要精确控制依赖，或者依赖会动态变化。
  • 例如，根据多个响应式数据动态更新一个图表。

• 使用 watch 的场景：

  • 需要精确控制依赖的复杂场景。
  • 需要监听特定的数据变化并执行特定的操作。
  • 当你明确知道需要监听哪些数据时。
  • 例如，监听一个表单输入框的值，或者监听一个计算属性的结果。

一些建议：

• 尽量避免在 watchEffect 中访问不必要的响应式数据，以减少不必要的更新。
• 在使用 watch 时，确保指定了所有必要的依赖，以避免遗漏更新。
• 始终记得在 watchEffect 和 watch 回调函数中清除副作用，以防止内存泄漏。
• 在大型组件中，优先使用 watch，以提高性能。
• 在调试时，可以使用 Vue Devtools 来查看 watch 和 watchEffect 的依赖关系。

尾声：总结与思考

通过今天的源码漫游，我们深入了解了 watch 和 watchEffect 的实现差异，以及它们在依赖收集和副作用执行上的不同策略。 watchEffect 就像一个盲盒，简单易用，但可能过度监听； watch 就像一个精确制导武器，可控性强，但需要手动指定依赖。

选择哪个工具取决于你的具体需求。 希望今天的讲座能帮助你在 Vue 开发中更加游刃有余！

最后，留给大家一个思考题：

• watch 和 watchEffect 的 deep 选项是如何实现的？ 它们在深度监听对象时，是如何追踪所有嵌套属性的依赖关系的？

欢迎大家在评论区分享你的答案和想法！ 我们下期再见！