Vue 3 中闭包引起的内存泄漏本质是闭包意外延长对组件实例、ref、reactive等的引用，导致卸载后无法回收；需通过 Heap Snapshot 查 Detached、Closure 引用链，重点排查定时器、全局事件监听、第三方库回调，并坚持“谁创建谁销毁”原则。
Vue 3 中闭包引起的内存泄漏不会直接表现为“渲染卡顿”，但会悄悄拖垮长期运行的页面——组件实例无法被回收，响应式数据、DOM 节点、事件监听器持续驻留内存，最终导致 JS Heap 持续上涨、页面变慢甚至崩溃。排查关键不在“渲染过程”，而在“组件卸载后是否真正释放”。
看懂闭包如何锁住组件实例
闭包本身不是问题，问题在于它意外延长了对组件内部响应式对象（如 ref、reactive）或 this 的引用生命周期。只要外部作用域（比如未清除的定时器回调、全局事件监听器、第三方库回调）还持有这些引用，GC 就不敢回收整个组件实例。
- 例如：
setInterval(() => { count.value++ })—— 回调函数形成闭包，持续引用count，而count属于组件作用域 - 又如：
window.addEventListener('resize', () => { chart.resize() })—— 若chart是组件内初始化的 ECharts 实例，该回调会让组件一直“活着” - 再如：用箭头函数封装 API 请求并传给第三方 SDK，而 SDK 内部缓存了该函数，等于间接持有了组件上下文
用 Chrome Memory 面板定位闭包泄漏
这是最直接有效的方式，不依赖猜测：
- 打开 DevTools → Memory 面板 → 选择 “Heap Snapshot”
- 操作流程：加载页面 → 打开目标组件 → 手动触发销毁（如路由跳转、
v-if="false"）→ 等待 1–2 秒 → 拍摄快照 - 在快照中筛选关键词：Detached（已分离 DOM）、Component、RefImpl、ReactiveEffect、EventListener
- 点击可疑对象 → 查看右侧 “Retainers” 栏 → 找到谁在引用它。若看到 Closure → setInterval 或 addEventListener，就坐实了闭包泄漏
检查常见闭包载体代码模式
重点扫描以下几类手动创建的异步/事件逻辑，它们最容易藏匿隐性引用：
立即学习“前端免费学习笔记（深入）”；
-
定时器：所有
setInterval、setTimeout、requestAnimationFrame，尤其轮询、防抖节流内部计时器 -
全局事件监听：
window、document、localStorage、postMessage的监听，且未在onUnmounted中移除 -
第三方库回调：ECharts 的
on('click')、地图 SDK 的on('moveend')、WebSocket 的onmessage，未调用对应off()或removeListener() -
watchEffect / watch 的副作用清理遗漏：使用了
watchEffect但没返回清理函数；或watch第三个参数未设flush: 'post'导致提前执行清理失败
修复原则：谁创建，谁销毁
Vue 不会替你管理“借来的资源”，必须显式配对：
- 每个
setInterval都要配clearInterval，保存 ID 并在onUnmounted中清除 - 每个
addEventListener都要配removeEventListener，确保传入**同一个函数引用**（避免用匿名函数或箭头函数直接绑定） - 每个第三方库实例（ECharts、Cesium、GeoScene）都必须调用其
dispose()、destroy()或offAll()方法 - 推荐封装成可复用的组合式函数，如
useEventListener、useInterval，内部自动绑定/解绑生命周期
