effectScope 是 Vue 3.2+ 的副作用容器，用于将 watch、computed、watchEffect 等逻辑打包进可统一启停的生命周期单元，解决手动清理遗漏问题；支持嵌套、独立作用域及与组合式函数深度集成。
effectScope 是 Vue 3.2+ 提供的副作用容器，核心作用不是增强响应性，而是把 watch、computed、watchEffect、定时器、事件监听等“打包”进一个可统一启停的生命周期单元里。它解决的是“谁来清理”这个实际问题——尤其在组合式函数或非组件上下文中，避免手动逐个 stop 或 clearTimeout 导致的遗漏和泄漏。
创建并注入副作用
先调用 effectScope() 创建作用域实例，再用 scope.run() 注入所有需要受控的逻辑：
- 所有在 run 回调内定义的 computed、watch、watchEffect、effect、ref（含其依赖）都会自动归属该作用域
- 没进 run 的副作用不会被收集，也不受 scope 控制
- 同一个 scope 可多次调用 run（比如条件分支中），所有注册项都会归入该作用域
一键停止与自动清理
调用 scope.stop() 会立即触发整套清理流程：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 停掉所有内部的 watch 和 watchEffect 监听器
- 销毁所有 computed 的依赖追踪和缓存，不再响应变化
- 执行所有通过 onScopeDispose 注册的自定义清理函数（如 clearInterval、removeEventListener、关闭 WebSocket）
- 已 stop 的作用域不可恢复；如需重启，必须新建 scope
嵌套与独立作用域控制
默认情况下，子 scope 会嵌套在父 scope 中，父 scope.stop() 时子 scope 自动停止：
立即学习“前端免费学习笔记（深入）”；
- 普通嵌套：直接
effectScope()，适合模块化封装（如表单校验 + 实时搜索各用一个 scope） - 独立作用域：用
effectScope(true)创建 detached scope，不受外部作用域影响，适合跨组件/路由共享的长期逻辑（如全局轮询服务）
与组合式函数深度结合
在 useXxx 函数中封装 effectScope，能让 hook 具备“自销毁”能力：
- 内部创建 scope，在 run 中注册副作用和 onScopeDispose 清理项
- 返回显式的 stop 方法，或在 onUnmounted / onScopeDispose 中调用 scope.stop()
- 使用者无需关心内部资源管理，例如 usePolling 就能安全地启动/停止定时请求
