闭包泄漏源于生命周期管理断层，需在onUnmounted中清除定时器、用具名函数或AbortController解绑事件、避免全局持有，并优先使用WeakMap存储DOM关联数据。
识别并清理闭包引用，核心在于判断闭包是否“不该活却一直活着”——它本该随组件卸载而释放，却因被定时器、事件监听器或全局缓存意外持有，拖住整个组件实例和关联的 DOM、响应式数据。
盯紧定时器里的闭包
setInterval 或 setTimeout 的回调函数一旦捕获了组件内的 ref、reactive 对象或 this，就构成强引用链。只要定时器没被清除，闭包就持续存活，组件实例无法被回收。
- 典型表现：页面切换后控制台仍在打印日志；反复进入同一组件，内存占用阶梯式上升
- Vue 3 推荐在 onUnmounted 中调用 clearInterval / clearTimeout
- 避免在回调中直接访问大型数组、store 实例或未包装的 DOM 节点
检查事件监听器是否“绑得进、解不出”
用 addEventListener 绑定箭头函数或内联函数时，闭包会捕获整个作用域。若 DOM 元素被移除但监听器未解绑，闭包仍通过事件系统被全局持有。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 特别危险：在 onMounted 中绑定 window.resize，却漏掉 onBeforeUnmount 清理
- 匿名函数无法传给 removeEventListener —— 改用具名函数，或用 AbortController 的 signal 选项（Chrome 94+ 支持）
- 验证方法：Elements 面板 → 选中元素 → Event Listeners 标签页，查看残留监听器
排查全局/缓存中的隐性持有
闭包本身不致命，真正让它变成内存黑洞的，是它被挂到 window、模块级 Map、单例类属性，或被 WebSocket、路由守卫等长生命周期对象悄悄引用。
立即学习“前端免费学习笔记（深入）”；
- 常见信号：关闭前手动置空某变量，内存明显回落；Heap Snapshot 中 Closure 类别下出现大量同结构高 Retained Size 条目
- DOM 关联数据优先用 WeakMap 存储（键为 DOM 节点，自动随节点回收）
- 需要主动感知对象销毁时，搭配 FinalizationRegistry + WeakRef，而非依赖人工“记得清理”
不复杂但容易忽略：闭包泄漏不是语法问题，而是生命周期管理断层。每次加定时器或监听器，都默认配一个对应的清理动作——这比事后排查快十倍。
