大家好，欢迎来到今天的 Vue 3 源码解密讲座！今天我们要聊的是一个非常神奇的 API，它就是 watchEffect。 你可能会觉得它有点像 watch，但又感觉哪里不一样。它到底是怎么做到“自动”依赖收集，而且还能自动停止的呢？别着急，咱们今天就来扒一扒它的底裤，看看它内部的 effect 函数到底做了些什么。
第一幕：watchEffect，一个不问来源的“观察员”
首先，我们来简单回顾一下 watchEffect 的用法。和 watch 相比，watchEffect 不需要明确指定要观察的数据源。 它可以直接在一个回调函数里写你想观察的逻辑，Vue 会自动帮你找出依赖。举个例子：
<template>
<div>{{ count }}</div>
</template>
<script setup>
import { ref, watchEffect } from 'vue';
const count = ref(0);
watchEffect(() => {
console.log('Count changed:', count.value);
});
// 修改 count 的值
setInterval(() => {
count.value++;
}, 1000);
</script>在这个例子里，watchEffect 里面的回调函数用到了 count.value，所以 Vue 就知道它依赖 count 这个响应式数据。 当 count 发生变化时，回调函数就会自动执行。这就是 watchEffect 的魔力！
第二幕：effect，幕后英雄的登场
watchEffect 的核心在于 Vue 3 的响应式系统，而这个系统的关键就是 effect 函数。 实际上，watchEffect 就是基于 effect 函数封装的。 为了更深入地理解 watchEffect，我们先来了解一下 effect 函数的基本原理。
effect 函数接收一个函数作为参数，这个函数就是我们要执行的副作用函数。 它主要做两件事：
- 执行副作用函数，并进行依赖收集。 当副作用函数执行时，如果读取了响应式数据，
effect函数就会将当前effect实例（也就是当前正在执行的副作用函数）和这个响应式数据关联起来。 - 返回一个 runner 函数。 这个 runner 函数可以手动执行副作用函数，并且每次执行都会重新进行依赖收集。
我们来看一个简单的 effect 函数的模拟实现：
let activeEffect = null; // 当前正在执行的 effect
function effect(fn) {
const effectFn = () => {
try {
activeEffect = effectFn; // 设置当前 effect
return fn(); // 执行副作用函数
} finally {
activeEffect = null; // 清空当前 effect
}
};
effectFn(); // 立即执行一次
return effectFn;
}
const targetMap = new WeakMap(); // 用于存储依赖关系
function track(target, key) {
if (!activeEffect) return; // 没有 effect 正在执行，直接返回
let depsMap = targetMap.get(target);
if (!depsMap) {
depsMap = new Map();
targetMap.set(target, depsMap);
}
let deps = depsMap.get(key);
if (!deps) {
deps = new Set();
depsMap.set(key, deps);
}
deps.add(activeEffect); // 将当前 effect 添加到依赖集合中
}
function trigger(target, key) {
const depsMap = targetMap.get(target);
if (!depsMap) return;
const deps = depsMap.get(key);
if (!deps) return;
deps.forEach(effect => {
effect(); // 触发所有依赖的 effect
});
}这个模拟的 effect 函数和 track、trigger 函数，展示了依赖收集和触发的基本流程。 当我们调用 effect(fn) 时，effectFn 会被立即执行一次，并在执行期间将 activeEffect 设置为自身。 如果 fn 里面读取了响应式数据，track 函数就会将 activeEffect 记录到该响应式数据的依赖集合中。 当响应式数据发生变化时，trigger 函数会触发所有依赖的 effect 重新执行。
第三幕：watchEffect 的“自动驾驶”模式
现在，我们再来看看 watchEffect 是如何利用 effect 函数实现自动依赖收集的。 其实，watchEffect 内部就是调用了 effect 函数，并做了一些额外的处理。
import { effect, stop } from '@vue/reactivity'; // 从 Vue 的 reactivity 模块导入 effect 和 stop
export function watchEffect(
effectFn,
options
) {
let effectInstance = null; // 用于存储 effect 实例
const runner = effect(
() => {
return effectFn();
},
{
scheduler: () => { // scheduler 调度器
// 当依赖的数据发生变化时，scheduler 会被调用
// 在这里，我们可以选择异步更新，或者立即更新
if (effectInstance) {
effectInstance.run(); // 手动执行 effect
}
},
stop: () => { // stop 函数
// 当 watchEffect 被停止时，stop 函数会被调用
},
...options // 其他选项，例如：lazy、flush 等
}
);
effectInstance = runner; // 保存 effect 实例
return () => {
stop(runner); // 返回一个停止函数，用于手动停止 watchEffect
};
}让我们逐行分析一下这段代码：
effect(fn, options):watchEffect内部调用了effect函数，并将传入的回调函数effectFn作为effect函数的参数。options参数可以控制effect的行为，例如：调度器（scheduler）、停止回调（stop）等等。scheduler调度器:scheduler是一个非常重要的选项。 当依赖的数据发生变化时，scheduler会被调用，而不是立即执行effectFn。 在watchEffect中，scheduler的作用是手动执行effect，这样可以实现更灵活的更新策略，例如：异步更新。stop函数:stop函数会在watchEffect被停止时调用。 我们可以在stop函数里做一些清理工作，例如：取消订阅、释放资源等等。- 返回停止函数:
watchEffect返回一个停止函数，用于手动停止watchEffect。 当我们不再需要观察数据时，可以调用这个停止函数来释放资源。
watchEffect 依赖收集流程总结：
| 步骤 | 描述 | 涉及函数 |
|---|---|---|
| 1 | 调用 watchEffect(effectFn) |
|
| 2 | watchEffect 内部调用 effect(effectFn, options) |
effect |
| 3 | effect 执行 effectFn，期间读取响应式数据，触发 track 函数 |
track |
| 4 | track 函数将当前 effect 实例添加到响应式数据的依赖集合中 |
track |
| 5 | 响应式数据发生变化，触发 trigger 函数 |
trigger |
| 6 | trigger 函数调用 scheduler |
|
| 7 | scheduler 手动执行 effect，重新进行依赖收集 |
第四幕：stop 函数，优雅地谢幕
stop 函数的作用是停止 watchEffect 的观察。 当我们调用 stop 函数时，Vue 会将 effect 实例从所有依赖的响应式数据中移除。 这样，当这些响应式数据再次发生变化时，effect 就不会被触发了。
stop 函数的实现非常简单，它只需要调用 effect 实例的 stop 方法即可。
// stop 函数的实现
export function stop(effect) {
if (effect.active) {
cleanupEffect(effect); // 清理 effect 的依赖
if (effect.options.onStop) {
effect.options.onStop(); // 调用 onStop 回调函数
}
effect.active = false; // 标记 effect 为非激活状态
}
}
function cleanupEffect(effect) {
const { deps } = effect; // 获取 effect 的依赖集合
if (deps.length) {
for (let i = 0; i < deps.length; i++) {
deps[i].delete(effect); // 从依赖集合中移除 effect
}
deps.length = 0; // 清空依赖集合
}
}cleanupEffect 函数会将 effect 从所有依赖的 Set 集合中移除，断开 effect 和响应式数据之间的联系。 effect.active = false 用于标记该 effect 已经停止，避免重复执行。
第五幕：watchEffect 和 watch 的区别
现在，我们来总结一下 watchEffect 和 watch 的区别：
| 特性 | watchEffect |
watch |
|---|---|---|
| 依赖收集 | 自动依赖收集，无需指定依赖源 | 需要明确指定依赖源 |
| 执行时机 | 立即执行一次，并在依赖发生变化时重新执行 | 只有在依赖发生变化时才会执行 |
| 停止观察 | 返回一个停止函数，用于手动停止观察 | 可以通过 onInvalidate 回调函数来清理副作用 |
| 使用场景 | 适合需要自动追踪依赖的场景，例如：根据数据变化更新 DOM、发送网络请求等 | 适合需要精确控制依赖源的场景，例如：监听特定属性的变化、执行复杂的副作用等 |
| 灵活性 | 相对较低，无法精确控制依赖源 | 相对较高，可以精确控制依赖源，并执行更复杂的操作 |
总而言之，watchEffect 更加方便易用，适合简单的依赖追踪场景。 而 watch 则更加灵活，适合需要精确控制的复杂场景。
总结：
今天，我们深入剖析了 watchEffect 的实现原理，了解了它如何通过 effect 函数实现自动依赖收集和停止观察。 watchEffect 的核心在于 effect 函数的依赖收集机制和 scheduler 调度器。 通过 effect 函数，Vue 可以自动追踪 watchEffect 回调函数中使用的响应式数据，并在数据发生变化时重新执行回调函数。 通过 stop 函数，我们可以手动停止 watchEffect 的观察，释放资源。
希望今天的讲座能帮助大家更好地理解 watchEffect，并在实际开发中灵活运用它。 感谢大家的收听！ 下次有机会再和大家一起探索 Vue 3 源码的奥秘！