组件内存泄漏怎么排查？教你如何正确回收定时器与全局事件监听-Vue.js-PHP中文网

组件内存泄漏排查核心是“谁占着不放，就找谁”，重点在资源创建时明确生命周期终点，尤其定时器和全局事件监听；用chrome memory面板抓快照比对，查retainers引用链；定时器须成对出现，全局事件监听要绑定即登记、卸载必移除；还需检查未取消请求、未销毁观察者、动态dom节点及意外全局变量。

组件内存泄漏怎么排查？教你如何正确回收定时器与全局事件监听

组件内存泄漏排查的核心在于“谁占着不放，就找谁”。重点不是等它崩了再救，而是从资源创建那一刻起，就明确它的生命周期终点——尤其是定时器和全局事件监听，它们最容易在组件卸载后继续存活，把整个实例钉在内存里。

打开 Chrome DevTools → Memory 标签 → 选中 “Heap snapshot” → 按照以下步骤操作：

页面加载完成，点 Capture（拍第一张快照）
反复进入/退出目标组件 3–5 次（比如切换路由或开关弹窗）
再次 Capture（第二张快照），切换到 “Comparison” 视图
筛选构造函数名（如 VueComponent、Window、ResizeObserver），重点关注数量持续增长的项
点击某对象 → 右侧看 “Retainers”，顺着引用链往上查：是不是某个未清除的 setInterval 或 addEventListener 正在持有它？

任何 setInterval 或 setTimeout 都不能只写一半。尤其注意：

不要在 mounted 里设了定时器，却在 beforeUnmount（Vue 3）或 beforeDestroy（Vue 2）里漏掉 clearInterval/clearTimeout
避免在闭包中隐式引用组件数据（例如 setInterval(() => console.log(this.count))），这会让整个组件实例无法被回收
推荐统一管理：把 timer ID 存为 this.timerId，并在销毁钩子中加空值判断，防止重复调用报错

只要监听对象不是当前组件内的 DOM 元素（比如 window、document、body），就必须手动解绑：

监听时别用匿名函数：window.addEventListener('resize', () => {...}) → 解绑时找不到引用，等于白清
改用具名方法或提前绑定的变量：this.resizeHandler = this.handleResize.bind(this)，然后 addEventListener('resize', this.resizeHandler)
Vue 3 中优先使用 onBeforeUnmount 清理；Vue 2 对应 beforeDestroy；确保移除语句和添加语句一一对应
特别注意第三方库内部注册的全局监听（如 ECharts resize、MapLibre 视角变化），它们往往自带 off 或 dispose 方法，务必调用

除了定时器和事件监听，这些地方也常偷偷“锁住”内存：

未取消的请求：Axios/Fetch 使用 AbortController，在卸载时调用 abort()
未销毁的观察者：MutationObserver、IntersectionObserver、ResizeObserver 都有 disconnect() 方法
动态插入的 DOM 节点：用 document.createElement 创建又没在卸载时 .remove()，也会形成悬挂节点
意外的全局变量：漏写 let/const，导致变量自动挂到 window 上，永久存活