effect 作用域是 Vue 3.2 引入、3.4 趋于稳定的副作用管理容器，用于批量组织和自动清理 watch、computed、定时器等响应式副作用，防止内存泄漏、重复注册与清理遗漏，并支持 onScopeDispose 自定义清理逻辑。

effect 作用域（effectScope）是 Vue 3.2 引入、在 3.4 中趋于稳定的核心响应式管理机制，它不是用来创建响应式数据的，而是专门用来批量组织和控制副作用生命周期的容器。

为什么需要 effect 作用域？

在组合式 API 中，watch、computed、watchEffect、定时器、事件监听等都属于“副作用”。它们各自独立运行，但组件卸载或逻辑切换时，若不手动清理，容易导致：

• 内存泄漏（比如未移除的 window.addEventListener）
• 重复注册（如多次调用 useMouse 导致多个 mousemove 监听器堆积）
• 清理遗漏（尤其在条件分支、异步回调中 stop() 调用位置难保证）
• 组合式函数（Composable）内部副作用对外不可见、无法统一干预

effectScope 的基本用法

它提供一个明确的作用域边界，让所有在其中声明的响应式副作用自动归属并可一键销毁：

• 创建作用域：const scope = effectScope()
• 在作用域内运行逻辑：scope.run(() => { /* watch、computed、定时器等 */ })
• 批量停止：scope.stop() —— 此时所有注册在该作用域下的 watch、computed、onScopeDispose 回调等全部被清理

注意：scope.run 内部创建的响应式 API（包括 watchEffect、computed、watch）会自动绑定到当前活跃作用域，无需额外标记。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

立即学习“前端免费学习笔记（深入）”；

搭配 onScopeDispose 做自定义清理

除了内置的响应式副作用，你还可以用 onScopeDispose 注册任意清理逻辑，比如：

• 清除 setTimeout / setInterval
• 移除第三方库的事件监听（如 Mapbox、Chart.js）
• 关闭 WebSocket 连接
• 释放 Canvas 或 WebGL 上下文

示例：onScopeDispose(() => { clearInterval(timerId); socket.close(); })

典型适用场景

effect 作用域最适合那些逻辑密集、生命周期敏感、需按模块隔离的场合：

• 复杂表单中多个校验 watch + 防抖请求 + 状态 computed 的聚合管理
• 图表组件内数据订阅、动画帧 requestAnimationFrame、resize 监听的一体化收放
• 自定义组合函数（如 useInfiniteScroll）内部副作用的封装与解耦
• 路由级或弹窗级逻辑，在离开/关闭时整块回收，避免残留