Vue.js内存泄漏求助：大量未销毁的VueComponent对象如何处理？

这些VueComponent实例正常吗？ #

正常情况下，组件调用destroy()后，Vue会自动清理实例的DOM绑定、事件监听，最终这个实例应该被浏览器垃圾回收（GC）处理。如果在destroy阶段还能看到100+实例，而且不少还带着几百个子组件，这绝对是内存泄漏的信号，完全不正常——这些实例没被正确回收，一直在占用内存，时间久了必然导致应用卡顿甚至崩溃。

明明用了beforeDestroy清理，为啥还留着？ #

你规范使用了beforeDestroy清理数据，但内存泄漏的坑不止这一个，常见的漏网之鱼有这些：

• 全局事件/订阅没解绑：比如给window加了scroll监听、Vuex的订阅、自定义事件总线的监听，没在销毁钩子里面取消
• 定时器忘了清：setInterval或者延迟执行的setTimeout没调用clear方法，定时器的回调函数会一直持有组件实例的引用，GC就无法回收
• 组件实例被全局缓存了：比如把组件实例存到了全局数组、对象或者第三方状态管理工具里，销毁时没移除这个引用
• 第三方库没销毁：比如echarts、地图这类组件，初始化后没在销毁时调用官方的销毁方法（比如dispose()），它们会绑定DOM和实例，导致GC无法回收
• DOM元素引用残留：用document.getElementById这类方法获取DOM后，存在组件实例的属性里，即便DOM被Vue移除了，这个引用还牵着实例

怎么干掉这些残留实例，释放内存？ #

1. 补全销毁阶段的清理逻辑 #

把所有涉及外部引用的操作，都在beforeDestroy或者destroyed钩子中做反向操作：

beforeDestroy() {
  // 移除全局事件监听
  window.removeEventListener('resize', this.handleResize)
  // 清除定时器
  this.timer && clearInterval(this.timer)
  // 取消Vuex订阅（如果之前存了订阅返回的取消函数）
  this.unsubscribeVuex && this.unsubscribeVuex()
  // 销毁第三方库实例
  this.echartsInstance && this.echartsInstance.dispose()
  // 从全局缓存中移除当前实例
  const cacheIndex = globalComponentList.indexOf(this)
  if (cacheIndex > -1) globalComponentList.splice(cacheIndex, 1)
}

2. 用Chrome DevTools精准定位泄漏点 #

• 打开Chrome的Memory面板，选择「Allocation Sampling」，先拍一张组件销毁前的内存快照，再拍销毁后的
• 对比两张快照，筛选VueComponent，查看哪些实例的「Retainers」（也就是还持有它引用的对象）存在，顺着引用链往上找，就能找到是谁在“勾着”实例不让GC回收
• 比如发现某个实例被全局的eventBus绑定的事件回调持有，那就是事件没取消的问题

3. 优化组件使用习惯 #

• 别随便把组件实例存到全局变量里，真要存的话，一定要在组件销毁时手动移除引用
• 频繁切换的组件可以用<keep-alive>缓存，但要通过include/exclude严格控制缓存范围，别把不用的组件也缓存起来占内存
• 检查嵌套极深的组件，有没有不必要的嵌套或者递归，能拆分的就拆分，减少子组件数量

4. 升级Vue 2到最新稳定版 #

Vue 2的旧版本（比如2.6之前的某些版本）存在特定场景的内存泄漏问题，比如v-for没加key、自定义指令没清理。升级到2.6.14（Vue 2的最终稳定版），说不定能解决一些底层的泄漏问题

总结 #

这些残留的VueComponent实例就是拖垮你应用的元凶，必须处理。先从补全销毁逻辑入手，再用DevTools定位隐藏的泄漏点，一步步清理后，再观察内存使用情况，应该就能解决卡顿和崩溃的问题了。

内容的提问来源于stack exchange，提问作者Greg Fielding