在项目开发中，其实一直在使用 effect 作用域，只是你未曾意识到。

Effect 作用域（Effect Scope）是 Vue 3.2 引入的底层管理机制，用于组织响应式副作用的生命周期。它通过作用域隔离和批量控制解决了内存泄漏与副作用清理的难题，是构建高性能 Vue 应用的基础设施。

一、副作用的本质与 Effect 作用域的角色

副作用（Effect） 指函数内影响外部状态的操作（如修改全局变量、发起异步请求）。Vue 的响应式系统依赖副作用实现自动化更新：

const count = ref(0); 
watchEffect(() => console.log(count.value)); // 副作用：监听 count 变化

• 问题：若未清理副作用，组件卸载后监听仍持续运行，导致内存泄漏。
• 解决方案：Effect 作用域将相关副作用（watch/computed/watchEffect）绑定为逻辑单元，支持统一启停。

关键价值：

1. 批量管理：替代手动调用多个 stop() 的繁琐逻辑；
2. 内存安全：确保无用的副作用被及时回收；
3. 嵌套控制：支持作用域层级继承，符合组件化设计思想。

二、Effect 作用域的核心机制

1. 基础使用模式

import { effectScope, ref, watchEffect } from "vue";  
const scope = effectScope(); // 创建作用域  

scope.run(() => {  
  const state = ref(0);  
  watchEffect(() => console.log(state.value)); // 副作用注册到当前作用域  
});  

scope.stop(); // 停止所有内部副作用

• run() 捕获函数内所有新创建的副作用；
• stop() 递归停止作用域内全部响应式依赖。

2. 嵌套作用域与独立作用域

• 默认嵌套：子作用域随父作用域停止而自动停止：

  parentScope.run(() => {
    const childScope = effectScope(); 
    childScope.run(/* 子级副作用 */); 
  });  
  parentScope.stop(); // 停止 parentScope 及所有子作用域
  

• 独立作用域（detached）：脱离父级生命周期管理：

  const detachedScope = effectScope(true); // 参数 true 表示独立
  detachedScope.stop(); // 需手动调用
  

3. 资源清理钩子：onScopeDispose

在作用域销毁时执行自定义清理逻辑（如清除定时器）：

scope.run(() => {  
  const timer = setInterval(/*...*/, 1000);  
  onScopeDispose(() => clearInterval(timer)); // 作用域停止时触发
});

三、典型应用场景与最佳实践

1. 可复用组合式函数封装

function useTimer(interval = 1000) {  
  const scope = effectScope();  
  const count = ref(0);  
  let timerId;  

  scope.run(() => {  
    watchEffect(() => {  
      timerId = setInterval(() => count.value++, interval);  
    });  
    onScopeDispose(() => clearInterval(timerId));  
  });  

  return { count, stop: () => scope.stop() }; // 暴露清理接口
}  

优势：

• 组合函数自主管理内部副作用，无需调用者感知细节；
• 避免跨组件复用时的内存泄漏风险。

2. 组件内局部状态管理

在复杂组件中，按功能模块划分作用域：

<script setup>  
const moduleA = effectScope();  
moduleA.run(() => {  
  // 模块A的副作用（如数据监听）  
});  

onUnmounted(() => moduleA.stop()); // 随组件卸载清理
</script>

实践建议：

• 单个组件内作用域层级不超过 3 层；
• 优先使用默认嵌套作用域，减少手动管理成本。

3. 全局状态管理

独立作用域适合管理跨组件共享状态：

const globalScope = effectScope(true);  
globalScope.run(() => {  
  const store = reactive({ /* 全局状态 */ });  
  watch(store, /* 全局监听 */);  
});  

// 应用销毁时手动调用 globalScope.stop()

四、与组件生命周期的协作关系

• 默认行为：组件的 setup() 函数在独立的 Effect 作用域中运行，卸载时自动触发 scope.stop()；
• 例外场景：动态创建的独立作用域需手动管理，例如：
• 跨组件共享状态（如全局单例）
• 临时作用域（如一次性监听）

设计原理：
Vue 通过 "当前活跃作用域栈" 追踪副作用归属。调用 run() 时，临时将当前作用域设为活跃状态，使内部副作用自动挂载其下。

五、总结

Effect 作用域是 Vue 响应式系统的底层基石，其价值体现在三个维度：

1. 工程化：通过作用域树实现副作用的模块化治理；
2. 安全性：杜绝因未清理副作用导致的内存泄漏；
3. 扩展性：为高级模式（如状态共享库、插件系统）提供基础设施。

尽管多数场景由 Vue 自动管理，理解 Effect 作用域机制仍有助于开发高性能、可维护的 Vue 应用，尤其在复杂状态逻辑封装中具有不可替代性。

参考文献：

• https://blog.51cto.com/wds0/13909427
• https://blog.csdn.net/sd1sd2/article/details/149332187
• https://segmentfault.com/a/1190000044958086
• https://blog.csdn.net/qq_29579625/article/details/145475850