vue响应式清理需三层协同：effectscope统一管理副作用生命周期，watcheffect的oninvalidate精准中断本轮异步操作，onunmounted作为组件级资源释放最终防线，坚持“谁注册、谁清理”原则。
Vue.js 响应式系统中，副作用函数的销毁与清理不是“自动发生”的默认行为，而是依赖明确的机制设计——它靠作用域管理、回调注册和生命周期钩子三层协同完成，核心目标是防止内存泄漏和状态错乱。
effectScope：统一收口副作用生命周期
Vue 3.2+ 引入 effectScope，本质是一个可显式控制的副作用容器。它不替代 watch 或 computed，而是把它们组织起来，实现“一键清理”：
- 调用
effectScope()创建独立作用域，后续在scope.run(() => { ... })中注册的watch、watchEffect、computed等全部归属该 scope -
scope.stop()会遍历内部所有副作用，依次执行其清理逻辑（如断开依赖追踪、清空 track/trigger 关系、置空引用），并帮助 GC 回收 - 组件卸载时 Vue 自动调用组件内隐式创建的作用域的
stop()；但跨组件或工具函数中的逻辑，必须手动创建 + 显式调用 - 注意：scope 外创建的 effect 不受其影响；异步回调中创建的 effect，若未在 scope 活跃期间执行，可能漏注册
watchEffect 的 onInvalidate：精准中断本轮副作用
当副作用涉及防抖、轮询、定时器或 pending 请求时，仅靠组件卸载时机清理往往太晚。这时应利用 onInvalidate：
- 在
watchEffect回调中接收onInvalidate参数，并在其内注册清理函数 - 每次新响应触发前，上一轮的
onInvalidate会自动执行，适合 clearTimeout、abort fetch、移除事件监听等 - 示例：
watchEffect(onInvalidate => { const timer = setTimeout(() => {}, 300); onInvalidate(() => clearTimeout(timer)); }) - 该机制只清理“当前本轮”，不影响后续新触发的逻辑，轻量且精准
onUnmounted：组件级资源释放的最终防线
对非响应式资源（如定时器 ID、EventSource、第三方实例），onUnmounted 是不可绕过的清理入口：
- 适用于 clearInterval、removeEventListener、chart.destroy()、map.remove()、observer.disconnect() 等显式释放操作
- 需配合 guard 判断实例是否存在，避免重复调用报错
- 注意：watch/watchEffect 本身会在组件卸载时自动停止，但其内部启动的异步回调（如 setTimeout 回调）不会自动取消，仍需 onInvalidate 或 onUnmounted 配合处理
- 第三方请求务必使用 AbortController，service 层暴露 cancel 方法，由 watch 清理函数或 onUnmounted 主动调用
清理原则与常见陷阱
可靠清理的关键在于责任清晰、时机恰当、不依赖侥幸：
- 坚持“谁注册、谁清理”：组件内创建的定时器，就在组件内 clearTimeout；composable 中创建的 effect，应返回 stop 方法交由调用方控制
- 避免直接赋值替换响应式对象（如
obj = {}），这会切断 proxy 追踪；清空 reactive 应用Object.assign(obj, {})，ref 则直接改.value - provide/inject 的数据不会因子组件销毁而自动清理，注入对象持有的定时器、事件监听、fetch controller 都需手动释放
- effectScope 不是魔法开关，清理生效的前提是副作用真正注册进了该 scope；未包裹在
scope.run中的逻辑，scope.stop()对其无效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
