Vue 2 如何处理 Vue 2 项目中常见的内存泄漏与定时器未清理隐患

Vue 2 内存泄漏主因是组件销毁时未清除定时器、事件监听、第三方库实例等外部引用；须在 beforeDestroy 中显式清除 setInterval/clearTimeout、removeEventListener、调用 dispose 方法，并用 activated/deactivated 处理 keep-alive 组件资源。

Vue 2 中内存泄漏的核心问题，是组件销毁时未主动切断对外部资源的引用。Vue 自身会清理响应式系统和模板相关依赖，但对开发者手动创建的定时器、事件监听、第三方库实例等“外部副作用”完全不感知——这些正是泄漏高发区。

定时器必须在 beforeDestroy 中显式清除

setInterval 或 setTimeout 创建后，回调函数会形成闭包，持续持有组件实例（如 this）或响应式数据（如 data 中的属性）。只要定时器没停，JS 引擎就认为该实例仍被引用，无法回收。

1. 在 mounted 中启动定时器，并保存 ID 到 data 或 this 上（如 this.timerId = setInterval(...)）
2. 在 beforeDestroy 中必须调用 clearInterval(this.timerId) 或 clearTimeout(this.timerId)
3. 避免在 Promise.then 或 async/await 回调中直接更新组件状态；若请求发出后组件已销毁，应配合标志位（如 this.isAlive = true/false）提前退出

全局事件监听器要成对注册与移除

window、document 或自定义 eventBus 上绑定的监听器，若未解绑，会把组件实例牢牢挂在全局作用域里，导致整块内存滞留。

1. 监听函数不能用箭头函数或匿名函数（无法精确 remove），应定义为组件 methods 中的具名方法，或使用 bind 并缓存引用
2. 在 mounted 中添加，在 beforeDestroy 中用完全相同的函数引用移除（removeEventListener 参数必须严格一致）
3. eventBus 场景下，务必用 $off 对应 $on；更推荐改用 provide/inject 或 Vuex/Pinia 的订阅机制，降低耦合

第三方库实例需调用 destroy/dispose 方法

ECharts、Mapbox、Choices.js 等库内部管理 DOM、Canvas、定时器和事件，不手动销毁，它们创建的所有资源都会常驻内存。

1. 初始化后必须保留实例引用（如 this.chart = echarts.init(...)）
2. 在 beforeDestroy 中调用 this.chart.dispose()（ECharts）或 this.map.destroy()（Mapbox）等对应销毁方法
3. 注意某些库的销毁是异步的（如部分地图 SDK），必要时加 await 确保完成
4. 避免在 setup 或 mounted 中 new 实例后不保存引用——等于“丢了钥匙”，后续无法释放

keep-alive 组件要区分生命周期处理

被 v-if 或 keep-alive 缓存的组件不会触发 beforeDestroy，但其中的定时器、监听器、大对象仍持续占用资源。

1. 改用 activated / deactivated 钩子控制资源启停：进入激活态时启动定时器/监听，失活时暂停或清理
2. 对于大型数据（如列表缓存、图表原始数据），考虑用 ID 映射 + 全局 store 缓存，避免在组件内直接 hold 整个对象树
3. PINIA/Vuex 中避免直接赋值巨型嵌套对象；需要重置时可调用 store.$reset()（Pinia）或清空 state 字段