effectScope 是 Vue 3.2+ 解决副作用管理混乱的刚需工具，本质是可统一启停的副作用容器，需通过 scope.run() 创建并运行副作用，调用 scope.stop() 一键关停所有关联 watch、computed、定时器等。
effectScope 是 Vue 3.2+ 引入的关键能力，不是“锦上添花”，而是解决副作用管理混乱的刚需工具。它本质是一个副作用容器：把 watch、computed、watchEffect、定时器、事件监听等统统收进来，再用 scope.stop() 一键关停——不用记谁该清、谁漏了、谁依赖谁。
什么时候必须用 effectScope？
出现以下任一情况，就该立刻引入：
- 组件里手动维护多个
onUnmounted清理函数（比如clearInterval+stopWatch+removeEventListener） - 写组合式函数（如
useMouse、useScroll）时，内部创建了全局副作用但调用方无法感知或控制生命周期 - 动态创建响应式逻辑（比如根据配置开启/关闭监控），需要随时整体启停
- 跨组件共享状态时，希望某组副作用只在特定业务流中生效，退出即销毁
基础用法：三步闭环
核心就是创建 → 运行 → 停止，所有副作用自动归属：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
创建作用域：
const scope = effectScope() -
在作用域内运行副作用：
scope.run(() => { /* ref / computed / watch / setInterval 等 */ })—— 注意：必须在run回调里定义，否则不会被收集 -
停止整个作用域：
scope.stop()—— 此刻所有内部watch失效、computed不再响应、定时器清除、onScopeDispose注册的清理函数依次执行
进阶技巧：嵌套、脱离与精准清理
真实项目常需更精细控制：
立即学习“前端免费学习笔记（深入）”；
-
嵌套作用域：子作用域自动跟随父作用域销毁。适合模块化封装，例如一个图表组件内分数据加载、动画、交互三块逻辑，各自用独立
effectScope()，顶层统一 stop -
独立作用域（detached）：
effectScope({ detached: true })创建后不自动绑定当前活跃作用域，可用于全局状态或插件级管理，避免被父组件卸载意外中断 -
注册自定义清理逻辑：在
scope.run内调用onScopeDispose(() => {...})，可处理addEventListener、第三方库实例销毁、WebSocket 关闭等非 Vue 原生副作用
避坑要点（实战高频错误）
这些细节不注意，effectScope 就会“失效”：
- 副作用没写在
scope.run(() => {...})里 → 不会被收集，stop()对它毫无影响 - 在
setup外部（比如普通函数、事件回调）调用scope.run→ 可能因作用域上下文丢失导致绑定失败 - 误以为
scope.stop()会销毁响应式数据（如ref）→ 实际只停副作用，ref本身仍可读写，只是不再触发依赖更新 - 组件卸载时忘记调用
scope.stop()→ 即使用了 effectScope，不主动停等于白用；推荐配合onBeforeUnmount自动触发
