Vue 3 组件销毁后未解绑全局事件是内存泄漏高频原因，表现为JS Heap持续上涨、Detached DOM累积；需通过DevTools内存快照对比确认EventListener增长及闭包引用，并检查addEventListenner配对、onMounted/onUnmounted遗漏、eventBus未取消等问题。

Vue 3 组件销毁后未解绑全局事件，是内存泄漏的高频原因。这类泄漏不会报错，但会导致组件实例、DOM 节点和响应式数据长期滞留内存，表现为 JS Heap 持续上涨、Detached DOM 节点累积。

确认是否由全局事件引发

打开 Chrome DevTools → Memory 面板 → 点击 “Take Heap Snapshot” 获取快照。切换路由或卸载目标组件后，再拍一次。在两个快照的对比视图中筛选 Detached HTMLDivElement 或 Window 下的监听器数量。若发现 EventListener 对象持续增多，且其闭包中持有组件内部 ref 或 this 上下文，基本可锁定为全局事件未解绑。

检查事件绑定与移除是否配对

重点排查以下三类写法：

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

• 使用 addEventListener 时传入了箭头函数或匿名函数，导致无法用 removeEventListener 精确移除
• 在 onMounted 中绑定，却遗漏了 onUnmounted 中的对应清理逻辑
• 通过 eventBus（如 mitt）订阅了全局事件，但未调用 off 或未用 onUnmounted 触发取消

推荐安全写法

避免手写配对逻辑，优先采用封装方案：

• 用 VueUse 的 useEventListener：自动在组件卸载时解绑，支持 window/document/target 多种目标
• 用 mitt 实例配合 onUnmounted：将 emitter.on() 返回的取消函数存为局部变量，在卸载时调用
• 手动绑定时，把监听函数声明为命名函数或用 ref 缓存，确保 removeEventListener 参数完全一致

验证修复是否生效

修复后重复操作：打开组件 → 切换路由 → 等待 2–3 秒 → 拍摄新 Heap Snapshot。对比前序快照，应看到 Detached 节点数量回落、EventListener 实例数不再增长、对应组件的闭包引用链消失。Performance Monitor 中 JS Heap 曲线也应在卸载后明显回落。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！