Vue实例销毁时需在beforeDestroy（Vue2）或onBeforeUnmount（Vue3）中解绑全局事件、eventBus和第三方库监听，且监听函数须为同一引用，再用Chrome Memory面板比对快照验证残留。
Vue 实例销毁时排查残留监听，核心是确认“谁还在引用这个组件”。监听器本身不泄漏，但绑定后未解绑，就会让回调函数持续持有对组件实例（this 或 setup 作用域）的引用，阻止垃圾回收。
重点查这三类监听是否配对解绑
不是所有监听都会导致泄漏，要聚焦在脱离组件 DOM 生命周期管理的那几类：
-
全局对象上的事件监听：比如
window.addEventListener('scroll', handler)、document.addEventListener('keydown', handler)。这类监听注册后永远存在，除非手动移除。 -
自定义事件总线（eventBus）：若用
bus.$on('msg', cb)订阅，却没在销毁前调用bus.$off('msg', cb)，回调就一直挂在 bus 上，间接持有着组件上下文。 -
第三方库内部绑定的 DOM 或自定义事件：例如 ECharts 的
chart.on('click', ...)、Mapbox 的map.on('move', ...)。这些监听由库内部管理，不调用.off()或.remove()就不会释放。
监听函数不能是匿名或箭头函数
这是最常被忽略的细节：解绑必须传入同一个函数引用，否则 removeEventListener 或 $off 无效。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- ❌ 错误写法：
window.addEventListener('resize', () => this.update())—— 箭头函数每次都是新函数，无法解绑。 - ❌ 错误写法：
this.$on('data-ready', function () { ... })—— 匿名函数无引用，this.$off找不到目标。 - ✅ 正确写法：把处理函数声明为命名方法或
ref存储的函数，确保增删使用同一引用。
Vue 2 和 Vue 3 的清理时机要选对
不能等到 destroyed 或 unmounted 再清理，那时组件实例可能已部分失活，this 不可靠，响应式数据也可能不可读。
立即学习“Java免费学习笔记（深入）”；
- Vue 2：用
beforeDestroy，此时this完整可用。 - Vue 3（Options API）：用
beforeUnmount。 - Vue 3（Composition API）：导入
onBeforeUnmount，在其中执行清理逻辑，避免this上下文问题。
用 Chrome Memory 面板验证是否还有残留
光看代码不够，要用工具确认：
- 打开 Chrome DevTools → Memory 面板 → 选 “Heap snapshot”。
- 操作：进入目标页面 → 拍第一个快照 → 跳出页面（触发卸载）→ 等 1–2 秒 → 拍第二个快照。
- 切换到 Comparison 视图，筛选
VueComponent或Closure，重点关注数量新增但未减少的项。 - 点开某个新增的
VueComponent，看 retaining path（保留路径），如果看到window.eventListeners或eventBus._events指向它，就说明监听未解绑。
