咳咳，各位掘金的靓仔们，晚上好！我是你们的老朋友，隔壁老王。今天咱们不聊八卦，聊点硬核的，一起扒一扒 Vue 3 源码里那个神秘兮兮的 effectScope，看看它到底是个什么玩意儿，又是怎么玩转那些 effect 的。
开场白：effectScope 这货是干嘛的？
话说，Vue 3 的响应式系统那是相当的牛逼，各种 reactive、ref 满天飞，effect 像小蜜蜂一样嗡嗡嗡地监听数据变化，然后执行副作用。但是，如果这些 effect 太多了，而且彼此之间还存在依赖关系，那可就麻烦了。比如，一个组件卸载了，它里面创建的那些 effect 还在那儿傻乎乎地跑着，占用资源，甚至还会引发内存泄漏。
这时候，effectScope 就派上用场了。它可以把一组相关的 effect 收集起来，统一管理，就像一个容器，把它们装进去。当我们需要停止这些 effect 时，只需要调用 effectScope.stop()，就能把它们全部干掉，干净利落！
effectScope 的核心代码：一个简单的实现
为了更好地理解 effectScope，咱们先撸一个简化版的 effectScope 出来，看看它的核心逻辑是怎样的。
class EffectScope {
constructor(detached = false) {
this.active = true; // 标记 scope 是否处于激活状态
this.effects = []; // 用于存储该 scope 下的所有 effect
this.cleanups = []; // 用于存储一些清理函数，比如组件卸载时的回调
this.parent = activeEffectScope; // 父 scope，用于嵌套
if (!detached && activeEffectScope) {
activeEffectScope.scopes.push(this); // 如果不是 detached，且存在父 scope，则将自己添加到父 scope 的 scopes 数组中
}
}
run(fn) {
if (!this.active) {
return fn(); // 如果 scope 已经停止，直接执行函数
}
try {
this.parent = activeEffectScope; // 缓存当前的 activeEffectScope
activeEffectScope = this; // 将当前 scope 设置为 activeEffectScope
return fn(); // 执行函数
} finally {
activeEffectScope = this.parent; // 恢复 activeEffectScope
this.parent = null; // 清理父 scope
}
}
stop() {
if (this.active) {
let i, l;
// 停止所有 effect
for (i = 0, l = this.effects.length; i < l; i++) {
this.effects[i].stop();
}
// 执行所有清理函数
for (i = 0, l = this.cleanups.length; i < l; i++) {
this.cleanups[i]();
}
// 停止所有子 scope
if (this.scopes) {
for (i = 0, l = this.scopes.length; i < l; i++) {
this.scopes[i].stop();
}
}
this.active = false; // 标记 scope 为已停止
}
}
onScopeDispose(fn) {
this.cleanups.push(fn); // 添加清理函数
}
}
let activeEffectScope = null;
function recordEffectScope(effect, scope = activeEffectScope) {
if (scope && scope.active) {
scope.effects.push(effect);
}
}
function effectScope(detached = false) {
return new EffectScope(detached);
}
function getCurrentScope() {
return activeEffectScope;
}
function onScopeDispose(fn) {
if (activeEffectScope) {
activeEffectScope.onScopeDispose(fn);
}
}
// 模拟 effect 函数 (为了配合 effectScope，这里简化一下)
function effect(fn) {
const _effect = {
fn,
active: true,
stop: () => {
_effect.active = false;
console.log('Effect stopped!');
}
};
recordEffectScope(_effect); // 将 effect 记录到当前的 activeEffectScope 中
_effect.fn(); // 立即执行一次
return _effect;
}
// 示例
const scope = effectScope();
scope.run(() => {
effect(() => {
console.log('Effect 1 running');
});
effect(() => {
console.log('Effect 2 running');
});
});
scope.stop(); // 停止 scope，里面的所有 effect 都会被停止这个简化的 effectScope 包含了以下几个关键点：
active属性： 标记effectScope是否处于激活状态。只有激活状态的effectScope才能收集effect。effects数组： 用于存储该effectScope下的所有effect实例。stop()方法： 遍历effects数组，调用每个effect的stop()方法，从而停止所有effect。activeEffectScope变量： 这是一个全局变量，用于记录当前激活的effectScope。在创建effect时，会将effect记录到当前的activeEffectScope中。recordEffectScope函数: 将 effect 和 scope 关联起来。onScopeDispose函数: 允许注册一些在 scope 停止时执行的清理函数。
Map 的妙用：Vue 3 源码中的实现
上面的简化版 effectScope 已经能够实现基本的功能，但是还不够高效。在 Vue 3 源码中，effectScope 使用了 Map 来关联 effect 实例，从而实现了更高效的清理。
咱们来看看 Vue 3 源码中 effectScope 的相关代码（简化版）：
class EffectScope {
active = true
detached = false
effects: ReactiveEffect[] = []
cleanups: (() => void)[] = []
parent: EffectScope | undefined | null = currentEffectScope
scopes: EffectScope[] | undefined
private index: number | undefined
constructor(detached: boolean = false) {
this.detached = detached
if (!detached && currentEffectScope) {
this.parent = currentEffectScope
this.index =
(currentEffectScope.scopes || (currentEffectScope.scopes = [])).push(
this
) - 1
}
}
run<T>(fn: () => T): T | undefined {
if (this.active) {
try {
this.on()
return fn()
} finally {
this.off()
}
} else if (__DEV__) {
warn('Cannot run an inactive effect scope.')
}
}
on() {
if (this.active) {
activeEffectScope = this
}
}
off() {
activeEffectScope = this.parent
}
stop(fromParent?: boolean) {
if (this.active) {
let i, l
for (i = 0, l = this.effects.length; i < l; i++) {
this.effects[i].stop()
}
for (i = 0, l = this.cleanups.length; i < l; i++) {
this.cleanups[i]()
}
if (this.scopes) {
for (i = 0, l = this.scopes.length; i < l; i++) {
this.scopes[i].stop(true)
}
}
if (this.parent && !fromParent) {
// optimized: only call inner scopes
remove(this.parent.scopes!, this)
}
this.active = false
}
}
onScopeDispose(fn: () => void) {
if (this.active) {
this.cleanups.push(fn)
} else if (__DEV__) {
warn('Cannot onScopeDispose an inactive effect scope.')
}
}
}
let activeEffectScope: EffectScope | undefined
export function effectScope(detached?: boolean) {
return new EffectScope(detached)
}
export function recordEffectScope(
effect: ReactiveEffect,
scope: EffectScope | undefined = activeEffectScope
) {
if (scope && scope.active) {
scope.effects.push(effect)
}
}
export function getCurrentScope() {
return activeEffectScope
}
export function onScopeDispose(fn: () => void) {
if (activeEffectScope) {
activeEffectScope.onScopeDispose(fn)
} else if (__DEV__) {
warn(
'onScopeDispose() is called when there is no active effect scope' +
' to be associated with.'
)
}
}看起来代码量有点多，但其实核心思路跟咱们的简化版差不多。 主要优化点体现在effect的stop方法的实现上。
stop 方法的优化
在 Vue 3 源码中，ReactiveEffect 实例有一个 deps 属性，它是一个 Set 集合，存储了该 effect 依赖的所有 ReactiveEffect 实例。当 effect 需要停止时，会遍历 deps 集合，将自身从这些 ReactiveEffect 实例的 deps 集合中移除。这样，当这些 ReactiveEffect 实例再次执行时，就不会再触发该 effect。
这种方式避免了遍历所有 effect，只需要遍历 effect 依赖的 ReactiveEffect 实例，从而提高了停止 effect 的效率。
effectScope 的应用场景
effectScope 在 Vue 3 中有着广泛的应用，主要体现在以下几个方面：
- 组件卸载： 在组件卸载时，可以使用
effectScope停止该组件下所有相关的effect，防止内存泄漏。 - 条件渲染： 在条件渲染时，可以使用
effectScope管理条件渲染内容中的effect，当条件不满足时，停止这些effect。 - 异步操作： 在异步操作中，可以使用
effectScope管理异步操作相关的effect，当异步操作完成后，停止这些effect。
总结：effectScope 的意义
effectScope 是 Vue 3 响应式系统中的一个重要组成部分，它提供了一种便捷的方式来管理和控制 effect 的生命周期。通过使用 effectScope，我们可以更好地组织代码，防止内存泄漏，提高应用程序的性能。
表格总结
| 特性 | 简化版 effectScope | Vue 3 源码 effectScope