Vue组件内存泄漏防控需在生命周期钩子中配对清理：定时器、事件监听器、第三方实例、EventBus监听及异步操作均须在beforeDestroy/onUnmounted中显式销毁或取消，确保引用及时释放。
Vue 组件生命周期管理是防止内存泄漏最直接、最有效的手段。关键不在于“知道有 beforeDestroy”，而在于是否在每个资源创建点，都配对了明确、可靠、可验证的清理动作。
定时器必须绑定实例并统一销毁
setInterval 或 setTimeout 一旦启动，就会持续持有对回调函数及其中引用对象的强引用。若组件已卸载但定时器仍在运行，整个组件实例就无法被垃圾回收。
- 始终将定时器 ID 存入 data 或 ref 中（如 intervalId: null），避免使用局部变量或全局变量存储
- 务必在 beforeDestroy（Vue 2） 或 onUnmounted（Vue 3 Composition API） 中调用 clearInterval / clearTimeout
- 推荐在 created/mounted 中启动，在 beforeDestroy/onUnmounted 中关闭——避免在 destroyed 中操作，因此时组件实例可能已部分解构
事件监听器需成对注册与移除
手动通过 addEventListener 添加的监听器不会随组件自动销毁，必须显式调用 removeEventListener 移除，且传入的函数引用必须完全一致。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 不要在回调中写匿名函数：window.addEventListener('resize', () => {...}) —— 这会导致无法移除
- 应定义具名方法或用箭头函数绑定到 this，并在 beforeDestroy 中用相同引用移除
- 对第三方库（如 Choices.js、MQTT 客户端、地图 SDK）创建的 DOM 节点或内部监听器，也要主动调用其提供的销毁方法（如 instance.destroy() 或 client.end()）
事件总线与自定义 emit 需严格生命周期对齐
使用 EventBus（如 Vue.prototype.$bus 或 mitt 实例）时，$on 注册的监听器若未及时 $off，会持续响应事件并维持对组件上下文的引用，造成泄漏。
立即学习“前端免费学习笔记（深入）”；
- 所有 $on 必须在 beforeDestroy 中对应执行 $off，且事件名与回调函数引用要严格匹配
- Vue 3 推荐用 mitt 配合 onUnmounted：先定义处理函数，再 onMounted 时注册，onUnmounted 时 off
- 避免在全局 event bus 上监听“泛型”事件（如 'update'），应使用语义化、作用域明确的事件名（如 'user/profile-updated'）
异步操作需设“存活标识”或取消机制
Promise、Axios 请求、WebSocket 连接等异步任务，若在组件销毁后才返回，尝试更新已不存在的 this.data 或触发已卸载组件的响应式更新，也会引发异常和隐性泄漏。
- 简单场景：用布尔标志位（如 isAlive: true）在 beforeDestroy 中置为 false，回调中先判断再更新
- 标准方案：Axios 使用 CancelToken 或 AbortController；fetch 使用 signal；WebSocket 在 beforeDestroy 中 close 并清空 onmessage
- 避免在 async/await 后直接 this.xxx = value，应加存活校验或封装为安全更新工具函数
