watchEffect本身不泄漏，但其回调中未清理定时器、请求、事件等副作用会导致内存泄漏；须用onInvalidate清理、避免异步/全局调用、防止孤儿effect。
Vue 3 中 watchEffect 本身不会自动泄漏，但它的回调函数里若创建了定时器、发起请求、绑定事件或调用第三方库实例，而没做清理，就会导致内存泄漏。问题不在 watchEffect，而在你“没断开引用链”的副作用操作。
确认 watchEffect 是否被正确清理
Vue 会在组件卸载时自动停止 watchEffect（只要它是在 <script setup> 或 setup() 中直接调用的）。但以下情况会绕过自动清理：
- 在异步回调中调用（如
setTimeout(() => watchEffect(...), 0)） - 在全局单例类、Pinia store 的 action、纯 TS 模块中使用
- 通过
effectScope()手动创建却未调用scope.stop()
这类场景下，watchEffect 返回的 effect 会脱离组件生命周期，变成“孤儿 effect”，永远驻留在响应式系统中。
检查副作用内部是否遗漏清理逻辑
watchEffect 提供 onInvalidate 回调，专用于清理上一次执行留下的资源——这是最常被忽略的关键机制。
立即学习“前端免费学习笔记（深入）”；
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 每次新执行前，
onInvalidate会自动触发，适合清除定时器、取消请求、解绑事件 - 不要把定时器存到
ref里，用闭包局部变量更安全、无响应式开销 - 避免在
onInvalidate外部提前调用清理，否则可能清掉还没启动的资源
示例（正确）：
watchEffect((onInvalidate) => {const timer = setInterval(() => console.log('tick'), 1000);
onInvalidate(() => clearInterval(timer));
});
排查未解绑的事件监听器
如果你在 watchEffect 里用了 addEventListener、eventBus.$on 或第三方库的监听方法，必须配对注销：
- 不能用匿名函数或箭头函数注册监听，否则无法精确移除
- 推荐使用
useEventListener（VueUse）等封装，它会在组件卸载时自动解绑 - 自定义事件总线尽量改用
provide/inject或 Pinia store 的订阅方式，避免全局强引用
错误写法（泄漏）：
watchEffect(() => {
window.addEventListener('resize', handler); // 没有 removeEventListener
});
验证泄漏是否存在
借助浏览器 DevTools 快速判断：
- 打开 Memory 面板 → 拍摄 Heap Snapshot → 切换路由/销毁组件 → 再拍一张 → 对比“Detached DOM tree”和“Vue Reactive Effect”数量是否持续增长
- 在 Components 面板查看组件实例是否仍被持有（展开 retainers，找 window、timer、eventListener 等强引用）
- 在 Console 中运行
performance.memory观察 JS heap size 是否随操作明显上升
若发现某组件多次挂载后，其关联的 effect 或 timer 实例数只增不减，基本可定位为未清理问题。
