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 曲线也应在卸载后明显回落。
