深入理解 Vue 3 源码中 `effectScope` 的实现，它如何利用 `Map` 关联 `effect` 实例，并在 `stop` 时进行高效清理？

大家好，我是老码，今天咱们来扒一扒 Vue 3 源码里一个挺有意思的小东西—— effectScope。这家伙，看着不起眼，但却是 Vue 响应式系统里的一块重要拼图。别担心，咱们不搞那些云里雾里的概念，直接撸代码，保证你听完能明白 effectScope 到底是个啥，怎么用的，以及 Vue 3 为什么要搞这么个玩意儿。

开场白：为什么要 effectScope？

先问大家一个问题：如果你的 Vue 组件里有很多 effect，比如用 watch、computed 创建的，组件卸载的时候，这些 effect 都要手动 stop 吗？要是不 stop，它们会一直监视着数据变化，搞不好就造成内存泄漏，或者在组件已经销毁的情况下还去更新 DOM，那可就出大问题了。

以前 Vue 2 的时候，处理这些事情确实比较麻烦，要么手动管理，要么靠一些第三方库。但在 Vue 3 里，有了 effectScope，这些问题就迎刃而解了！它可以把一组 effect 收集起来，统一管理。组件卸载的时候，只需要 stop 掉 effectScope，里面的所有 effect 就都会自动 stop 掉。简单、高效，还不容易出错！

effectScope 的基本用法

先来个简单的例子，让你对 effectScope 有个直观的印象：

import { effectScope, ref, watch } from 'vue';

const count = ref(0);

const scope = effectScope();

scope.run(() => {
  watch(count, (newValue) => {
    console.log('Count changed:', newValue);
  });

  // 更多 reactive 操作...
});

// 在某个时刻，停止 scope 内的所有 effect
scope.stop();

这段代码里，我们创建了一个 effectScope 实例 scope，然后用 scope.run() 包裹了一些响应式操作。这样，watch 创建的 effect 就被收集到了 scope 里。当我们调用 scope.stop() 的时候，watch 就会被停止，控制台就不会再打印 "Count changed" 了。

深入源码：effectScope 的内部结构

光会用还不够，咱们得看看 effectScope 内部是怎么实现的，才能真正理解它的工作原理。 effectScope 的源码其实并不复杂，核心就是一个 Map，用来存储它管理的所有 effect。

class EffectScope {
  active = true;
  effects: ReactiveEffect[] = [];
  cleanups: (() => void)[] = [];
  parent: EffectScope | undefined = currentScope;
  scopes: EffectScope[] | undefined;

  constructor(public detached = false) {
    if (!detached && currentScope) {
      (currentScope.scopes || (currentScope.scopes = [])).push(this);
    }
  }

  run<T>(fn: () => T): T | undefined {
    if (this.active) {
      try {
        this.onScopeDispose = () => {}; // 避免在run中调用stop时再次执行dispose
        currentScope = this;
        return fn();
      } finally {
        currentScope = this.parent;
      }
    } else if (__DEV__) {
      console.warn(
        `Cannot run an inactive effect scope.`,
      );
    }
  }

  stop(): void {
    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();
        }
      }
      this.active = false;
      this.onScopeDispose();
    }
  }

  onScopeDispose(fn: () => void) {
    this.cleanups.push(fn);
  }
}

let currentScope: EffectScope | undefined = undefined;

export function recordEffectScope(effect: ReactiveEffect, scope: EffectScope | undefined = currentScope) {
  if (scope && scope.active) {
    scope.effects.push(effect);
  }
}

export function effectScope(detached?: boolean) {
  return new EffectScope(detached)
}

export function onScopeDispose(fn: () => void) {
  if (currentScope) {
    currentScope.onScopeDispose(fn);
  } else if (__DEV__) {
    console.warn(
      `onScopeDispose() is called when there is no active effect scope` +
        ` to be associated with.`,
    );
  }
}

咱们来逐行分析一下：

active: 一个布尔值，表示 effectScope 是否处于激活状态。只有激活状态的 effectScope 才能运行和收集 effect。
effects: ReactiveEffect[]: 一个数组，存储所有属于这个 effectScope 的 effect 实例。ReactiveEffect 是 Vue 3 响应式系统的核心，简单来说，它就是一个带有依赖追踪和更新机制的函数。
cleanups: (() => void)[]: 一个数组，存储一些清理函数。这些函数会在 effectScope 被 stop 的时候执行，用来做一些额外的清理工作。
parent: EffectScope | undefined: 指向父级的 effectScope，用于形成嵌套的 effectScope 结构。
scopes: EffectScope[] | undefined: 存储子级的 effectScope。
currentScope: 一个全局变量，用来记录当前激活的 effectScope。在 effectScope.run() 执行期间，currentScope 会被设置为当前的 effectScope 实例，这样，所有在这个期间创建的 effect 都会被自动添加到这个 effectScope 里。
recordEffectScope(effect: ReactiveEffect, scope: EffectScope | undefined = currentScope): 注册effect到scope中。

run() 方法：激活 effectScope，执行函数

run() 方法是 effectScope 的核心方法之一。它的作用是激活 effectScope，并执行传入的函数。在函数执行期间，currentScope 会被设置为当前的 effectScope 实例，这样，所有在这个期间创建的 effect 都会被自动添加到这个 effectScope 里。

run<T>(fn: () => T): T | undefined {
  if (this.active) {
    try {
      this.onScopeDispose = () => {}; // 避免在run中调用stop时再次执行dispose
      currentScope = this;
      return fn();
    } finally {
      currentScope = this.parent;
    }
  } else if (__DEV__) {
    console.warn(
      `Cannot run an inactive effect scope.`,
    );
  }
}

这段代码的关键在于 try...finally 结构。在 try 块里，我们把 currentScope 设置为当前的 effectScope 实例，然后执行传入的函数 fn。无论 fn 执行过程中是否发生错误，finally 块都会被执行，确保 currentScope 恢复到原来的值（也就是父级的 effectScope，或者 undefined）。

stop() 方法：停止所有 effect，清理资源

stop() 方法的作用是停止 effectScope 内的所有 effect，并执行清理函数。

stop(): void {
  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();
      }
    }
    this.active = false;
    this.onScopeDispose();
  }
}

这段代码的逻辑也很简单：

首先，遍历 this.effects 数组，调用每个 effect 的 stop() 方法，停止它们。
然后，遍历 this.cleanups 数组，执行每个清理函数。
如果存在子scope，则递归调用子scope的stop方法。
最后，把 this.active 设置为 false，表示 effectScope 已经停止。

onScopeDispose() 方法：注册清理函数

onScopeDispose() 方法用来注册清理函数。这些函数会在 effectScope 被 stop 的时候执行，用来做一些额外的清理工作。比如，你可以用它来取消一个定时器，或者移除一个事件监听器。

onScopeDispose(fn: () => void) {
  this.cleanups.push(fn);
}

effectScope() 函数：创建 effectScope 实例

effectScope() 函数用来创建 effectScope 实例。它接受一个可选的 detached 参数，用来指定是否创建一个独立的 effectScope。

export function effectScope(detached?: boolean) {
  return new EffectScope(detached)
}

如果 detached 为 true，则创建的 effectScope 不会和当前的 effectScope 关联。也就是说，在这个 effectScope 里创建的 effect 不会被添加到当前的 effectScope 里。

onScopeDispose() 函数：注册清理函数

export function onScopeDispose(fn: () => void) {
  if (currentScope) {
    currentScope.onScopeDispose(fn);
  } else if (__DEV__) {
    console.warn(
      `onScopeDispose() is called when there is no active effect scope` +
        ` to be associated with.`,
    );
  }
}

这个函数允许你在当前激活的 effectScope 上注册清理函数。这对于在组件卸载时执行一些清理操作非常有用。

嵌套的 effectScope

effectScope 还有一个很重要的特性，就是可以嵌套。也就是说，你可以在一个 effectScope 里创建另一个 effectScope。这样可以形成一个树状的 effectScope 结构，方便管理复杂的响应式逻辑。

import { effectScope, ref, watch } from 'vue';

const count = ref(0);

const outerScope = effectScope();

outerScope.run(() => {
  watch(count, (newValue) => {
    console.log('Outer count changed:', newValue);
  });

  const innerScope = effectScope();

  innerScope.run(() => {
    watch(count, (newValue) => {
      console.log('Inner count changed:', newValue);
    });
  });

  // 在某个时刻，停止 innerScope
  // innerScope.stop();
});

// 在某个时刻，停止 outerScope
outerScope.stop();

在这个例子里，我们创建了一个 outerScope，然后在 outerScope.run() 里又创建了一个 innerScope。这样，innerScope 就成为了 outerScope 的子 effectScope。当我们调用 outerScope.stop() 的时候，innerScope 也会被自动 stop 掉。

effectScope 的优势总结

说了这么多，effectScope 到底有哪些优势呢？咱们来总结一下：

统一管理 effect: effectScope 可以把一组 effect 收集起来，统一管理。避免了手动管理 effect 的麻烦，也减少了出错的可能性。
自动清理 effect: 当 effectScope 被 stop 的时候，里面的所有 effect 都会被自动 stop 掉。避免了内存泄漏和不必要的 DOM 更新。
嵌套结构: effectScope 可以嵌套，形成树状结构，方便管理复杂的响应式逻辑。
解耦: 将响应式逻辑封装在 effectScope 中，可以提高代码的可维护性和可测试性。
更简洁的代码: 使用 effectScope 可以让你的代码更简洁、更易读。

effectScope 的使用场景

effectScope 在 Vue 3 里有很多使用场景，比如：

组件卸载时的清理: 在组件的 beforeUnmount 钩子里 stop 掉 effectScope，可以确保组件卸载的时候，所有的 effect 都会被自动 stop 掉。
条件渲染: 当组件的某个部分被条件渲染的时候，可以用 effectScope 来管理这部分里的 effect。当这部分被卸载的时候，effectScope 也会被自动 stop 掉。
插件开发: 在插件开发中，可以用 effectScope 来管理插件里的 effect。当插件被卸载的时候，effectScope 也会被自动 stop 掉。

表格总结：EffectScope 属性和方法

为了方便大家记忆，我把 EffectScope 的主要属性和方法整理成一个表格：

属性/方法	类型	描述
`active`	`boolean`	表示 `effectScope` 是否处于激活状态。
`effects`	`ReactiveEffect[]`	存储所有属于这个 `effectScope` 的 `effect` 实例。
`cleanups`	`(() => void)[]`	存储一些清理函数。这些函数会在 `effectScope` 被 `stop` 的时候执行，用来做一些额外的清理工作。
`parent`	`EffectScope \| undefined`	指向父级的 `effectScope`，用于形成嵌套的 `effectScope` 结构。
`scopes`	`EffectScope[] \| undefined`	存储子级的 `effectScope`。
`run(fn: () => T)`	`(fn: () => T) => T \| undefined`	激活 `effectScope`，并执行传入的函数。在函数执行期间，`currentScope` 会被设置为当前的 `effectScope` 实例，这样，所有在这个期间创建的 `effect` 都会被自动添加到这个 `effectScope` 里。
`stop()`	`() => void`	停止 `effectScope` 内的所有 `effect`，并执行清理函数。
`onScopeDispose(fn: () => void)`	`(fn: () => void) => void`	注册清理函数。这些函数会在 `effectScope` 被 `stop` 的时候执行，用来做一些额外的清理工作。

结束语：effectScope，Vue 3 的小助手

好了，今天关于 Vue 3 源码中 effectScope 的讲解就到这里了。希望通过今天的讲解，大家能够对 effectScope 有一个更深入的理解。记住，effectScope 是 Vue 3 响应式系统里一个非常实用的小助手，它可以帮助你更好地管理 effect，避免内存泄漏，提高代码的可维护性。在实际开发中，多多使用 effectScope，相信你一定会爱上它的！

下次有机会，咱们再一起扒一扒 Vue 3 源码里其他有趣的小东西！拜拜！

发表回复 取消回复

发表回复取消回复