解释 Vue 3 源码中 `effectScope` 如何与组件实例的生命周期绑定，实现响应式副作用的自动停止。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，今天咱们来聊聊 Vue 3 源码里一个相当酷炫的东西：effectScope。这玩意儿跟组件实例的生命周期紧密相连，能让你的响应式副作用自动停止，简直是懒人福音，性能神器！

开场白：响应式世界的烦恼

想象一下，你用 Vue 写了一个炫酷的组件，里面用了很多响应式数据，还搞了一堆 watch、computed，甚至直接用 effect 去监听数据变化。这时候，如果组件被销毁了，那些响应式副作用还傻乎乎地跑着，监听着已经不存在的数据，是不是很浪费资源？这就像你关了电视，结果音响还在嗡嗡响，贼烦人！

Vue 3 引入 effectScope 就是为了解决这个问题，它能把这些响应式副作用“打包”起来，然后跟组件实例的生命周期绑定。组件销毁的时候，effectScope 也会跟着“凉凉”，自动停止所有相关的副作用，干脆利落！

effectScope：一个“作用域容器”

你可以把 effectScope 想象成一个容器，专门用来装 effect。它提供了两个关键方法：

run(fn)：在这个容器里运行一个函数 fn，这个函数里面创建的所有 effect 都会被自动添加到这个容器里。
stop()：停止容器里的所有 effect。

源码解析：effectScope 的真面目

咱们先来瞅瞅 effectScope 的源码（简化版，重点突出）：

class EffectScope {
  active = true // 标记作用域是否活跃
  effects: ReactiveEffect[] = [] // 存储 effect 的数组
  cleanups: (() => void)[] = [] // 存储清理函数的数组

  constructor(detached = false) {
    if (!detached && currentScope) {
      // 如果不是 detached 并且存在当前作用域，则把自己添加到父作用域
      currentScope.scopes || (currentScope.scopes = []).push(this)
    }
  }

  run<T>(fn: () => T): T | undefined {
    if (this.active) {
      try {
        this.on() // 设置当前作用域为 this
        return fn() // 执行函数，里面的 effect 会被收集
      } finally {
        this.off() // 恢复之前的作用域
      }
    } else {
      console.warn(`Cannot run an inactive EffectScope.`)
    }
  }

  on() {
    // 设置当前作用域，方便 effect 收集
    activeEffectScope = this
  }

  off() {
    // 恢复之前的 activeEffectScope
    activeEffectScope = this.parent
  }

  stop() {
    if (this.active) {
      this.effects.forEach(e => e.stop()) // 停止所有 effect
      this.cleanups.forEach(fn => fn()) // 执行所有清理函数
      this.active = false // 标记为不活跃
      this.scopes?.forEach(s => s.stop()) // 递归停止子作用域
    }
  }
}

let activeEffectScope: EffectScope | undefined // 当前活跃的作用域

export function recordEffectScope(effect: ReactiveEffect, scope: EffectScope | undefined = activeEffectScope) {
  if (scope && scope.active) {
    scope.effects.push(effect) // 把 effect 添加到作用域
  }
}

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

export function getCurrentScope() {
  return activeEffectScope
}

这段代码揭示了 effectScope 的核心机制：

active 标志位： 控制作用域是否活跃，只有活跃的作用域才能运行和收集 effect。
effects 数组： 存储所有属于这个作用域的 effect 实例。
run 方法： 在执行传入的函数 fn 之前，会把 activeEffectScope 设置为当前 effectScope 实例，这样，fn 里面创建的 effect 就会被 recordEffectScope 函数收集到当前作用域的 effects 数组里。
stop 方法： 遍历 effects 数组，调用每个 effect 的 stop 方法，停止所有副作用。同时，还会执行 cleanups 数组里的所有清理函数。
作用域嵌套： effectScope 支持嵌套，如果在一个 effectScope 里面创建了新的 effectScope，那么新的 effectScope 会自动成为父作用域的子作用域。停止父作用域时，会递归停止所有子作用域。

effectScope 与组件生命周期的绑定

Vue 3 通过 setup 函数和 onUnmounted 生命周期钩子，把 effectScope 跟组件实例的生命周期紧密联系起来。

在 setup 函数里，Vue 会创建一个 effectScope 实例，并把它设置为当前组件实例的 effectScope。然后，在 onUnmounted 钩子里，Vue 会调用这个 effectScope 实例的 stop 方法，停止所有相关的副作用。

咱们来看一段示例代码：

<template>
  <div>{{ count }}</div>
</template>

<script lang="ts">
import { defineComponent, ref, watch, onUnmounted, effectScope } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);
    const doubleCount = ref(0);

    // 创建一个 effectScope
    const scope = effectScope()

    scope.run(() => {
      // 在 effectScope 里创建 watchEffect
      watch(count, (newCount) => {
        console.log('Count changed:', newCount);
        doubleCount.value = newCount * 2;
      });
    });

    // 在组件卸载时停止 effectScope
    onUnmounted(() => {
      console.log('Component unmounted, stopping effectScope');
      scope.stop();
    });

    setInterval(() => {
        count.value++
    }, 1000)

    return {
      count,
      doubleCount,
    };
  },
});
</script>

在这段代码里：

我们在 setup 函数里创建了一个 effectScope 实例 scope。
我们使用 scope.run() 包裹了 watch 函数。这意味着 watch 函数创建的 effect 会被自动添加到 scope 的 effects 数组里。
我们在 onUnmounted 钩子里调用了 scope.stop()。这意味着当组件被卸载时，watch 函数创建的 effect 会被自动停止。

为什么不用 watch 的 onStop 选项？

你可能会问，watch 不是有 onStop 选项吗？为什么还要用 effectScope 这么麻烦？

onStop 选项确实可以用来在 watch 停止时执行一些清理工作，但是它有几个缺点：

需要手动绑定： 你需要在每个 watch 里都设置 onStop 选项，比较繁琐。
不够集中： 清理逻辑分散在各个 watch 里，不利于维护和管理。
无法处理非 watch 的 effect： 如果你的组件里还有其他类型的 effect，比如直接用 effect 函数创建的，onStop 就无能为力了。

effectScope 的优势在于：

自动收集： 它可以自动收集所有在 run 函数里创建的 effect，无需手动绑定。
集中管理： 所有清理逻辑都集中在 stop 方法里，方便维护和管理。
适用性广： 它可以处理任何类型的 effect，包括 watch、computed 和直接用 effect 函数创建的。

detached 选项：自由的灵魂

effectScope 还有一个 detached 选项，可以让你创建一个“独立”的 effectScope。也就是说，这个 effectScope 不会自动绑定到当前组件实例的生命周期，你需要手动控制它的停止。

const detachedScope = effectScope(true) // 创建一个 detached 的 effectScope
detachedScope.run(() => {
  // 在 detachedScope 里创建 effect
})

// 在需要的时候手动停止 detachedScope
detachedScope.stop()

detached 的 effectScope 适用于一些特殊的场景，比如：

全局状态管理： 你可能需要创建一个全局的 effectScope 来管理一些全局状态，这些状态的生命周期不依赖于任何组件。
手动控制副作用： 你可能需要手动控制一些副作用的启动和停止，而不是让它们自动绑定到组件的生命周期。

代码示例：更深入的理解

咱们再来看一个更复杂的例子，展示 effectScope 的威力：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="toggleSubscription">
      {{ isSubscribed ? 'Unsubscribe' : 'Subscribe' }}
    </button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watch, onUnmounted, effectScope } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);
    const isSubscribed = ref(true);
    let scope: any = null

    const doubleCount = computed(() => count.value * 2); //computed 本身就带有effect

    function createScope(){
      scope = effectScope()
      scope.run(() => {
          // watchEffect
          watch(count, (newCount) => {
            console.log('Count changed:', newCount);
          });

          // effect
          const stopEffect = watch(doubleCount, (newDoubleCount) => {
            console.log('Double Count changed:', newDoubleCount);
          });

          // cleanup function
          scope.cleanups.push(() => {
            console.log('Cleaning up effect');
            stopEffect()
          });
      })
    }

    createScope()

    const toggleSubscription = () => {
      if (isSubscribed.value) {
        console.log('Unsubscribing, stopping effectScope');
        scope.stop();
      } else {
        console.log('Subscribing, starting effectScope');
        createScope()
      }
      isSubscribed.value = !isSubscribed.value;
    };

    setInterval(() => {
      count.value++;
    }, 1000);

    onUnmounted(() => {
      console.log('Component unmounted, stopping effectScope');
      scope.stop();
    });

    return {
      count,
      doubleCount,
      isSubscribed,
      toggleSubscription,
    };
  },
});
</script>

在这个例子里：

我们用 effectScope 包裹了 watch 和 cleanup 函数。
我们用 isSubscribed 变量控制是否启用响应式副作用。
当 isSubscribed 为 false 时，我们会调用 scope.stop() 停止所有副作用。
当 isSubscribed 为 true 时，我们会重新创建一个 effectScope 并启动副作用。
在 onUnmounted 钩子里，我们确保在组件卸载时停止所有副作用。

effectScope 的应用场景

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

组件库开发： 你可以用 effectScope 来管理组件内部的响应式副作用，确保组件卸载时不会造成内存泄漏。
状态管理： 你可以用 effectScope 来管理一些复杂的状态逻辑，比如表单验证、数据同步等。
动画效果： 你可以用 effectScope 来管理动画效果的启动和停止，确保动画效果在组件卸载时停止。
第三方库集成： 你可以用 effectScope 来管理第三方库的副作用，确保第三方库不会干扰 Vue 应用的运行。

总结：effectScope 的价值

effectScope 是 Vue 3 里一个非常强大的工具，它可以帮助你更好地管理响应式副作用，提高应用的性能和可维护性。它可以：

自动收集和停止副作用： 无需手动绑定和清理。
集中管理副作用： 方便维护和管理。
提高性能： 避免内存泄漏和不必要的计算。
提高可维护性： 让代码更清晰和易于理解。

effectScope 与 Vue 2 的对比

特性	Vue 2	Vue 3 (with `effectScope`)
副作用管理	手动管理，容易忘记清理	自动管理，通过 `effectScope` 绑定生命周期
内存泄漏风险	较高，容易忘记清理副作用	较低，`effectScope` 自动清理
代码复杂性	较高，清理逻辑分散在各个地方	较低，清理逻辑集中在 `effectScope.stop()` 中
适用场景	简单应用	中大型应用，组件库开发

结束语：响应式编程的未来

effectScope 是 Vue 3 在响应式编程方面的一个重要创新。它让响应式编程更加简单、高效和可靠。掌握 effectScope，你就能写出更优雅、更健壮的 Vue 应用，成为真正的 Vue 大佬！

希望今天的讲座能让你对 effectScope 有更深入的理解。祝大家编程愉快，bug 远离！

发表回复 取消回复

发表回复取消回复