vue组合式函数清理副作用应使用effectscope统一管理，配合onunmounted自动销毁；需用onscopedispose处理addeventlistener等原生api，并封装为隐藏清理细节的健壮函数。
Vue 组合式函数中清理副作用，核心是让副作用“可追踪、可控制、可销毁”。不能只靠 onUnmounted 手动逐个清理，尤其当逻辑被抽离成复用函数（如 useScroll、usePolling）时，调用方根本不知道内部创建了哪些定时器、监听器或 watch。真正可靠的方案是结合 effectScope + 生命周期钩子 + 清理注册机制。
为什么传统清理方式容易出问题
在组合式函数里直接写 setInterval 或 addEventListener，再把清理函数 return 出去，看似可行，实则隐患重重：
- 调用方可能忘记调用清理函数，导致内存泄漏
- 同一组合函数被多次调用，会重复绑定事件或启动定时器
- watch 创建后必须显式 stop，否则组件卸载后仍响应变化
- computed 本身不需手动清理，但它的依赖（比如 ref）若被其他副作用持续读取，就可能引发意外更新
推荐做法：用 effectScope 统一收纳副作用
effectScope 是 Vue 3.2+ 提供的副作用容器，它让所有在 scope.run(() => {}) 内定义的响应式操作自动归属该作用域，调用 scope.stop() 即可一键关停。
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 创建作用域：
const scope = effectScope() - 在作用域内运行逻辑：
scope.run(() => { watch(...); setInterval(...); }) - 绑定到组件生命周期：
onUnmounted(() => scope.stop()) - 也可用于手动控制启停，比如根据开关状态动态启用/禁用整组监控逻辑
处理非 Vue 原生副作用（如事件监听、AbortController）
Vue 自动管理 watch、computed、watchEffect 的清理，但原生 API（如 addEventListener、fetch + AbortController、WebSocket）需要手动介入。这时可在 scope.run 中使用 onScopeDispose 注册清理函数：
onScopeDispose(() => window.removeEventListener('mousemove', handler))-
onScopeDispose(() => controller.abort())—— 配合watchEffect的onCleanup更稳妥，适合请求类场景 - 注意：
onScopeDispose只在scope.stop()或组件卸载时触发，不是每次 effect 重跑都执行
组合式函数封装建议结构
一个健壮的组合式函数应隐藏清理细节，暴露简洁接口：
- 内部创建
effectScope，并在setup或调用处绑定onUnmounted - 副作用全部写在
scope.run回调内，避免漏收 - 返回值只暴露业务相关响应式数据和方法，不暴露
stop或清理函数 - 如需外部控制启停，可额外提供
start()/stop()方法，内部调用scope.stop()和重新scope.run()
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
