vue导致内存溢出的原因:
- 接口数据量巨大,前端渲染时占用大量内存(解决方法:限制接口的返回数据,或者前端显示分批分页展示数据); 
- v-if 频繁增删DOM节点(解决方法:离开页面时将控制v-if的变量设置为null); 
- 代码中存在死循环或递归调用(解决方法:优化代码); 
- echarts图未彻底删除(解决方法:如下图); 
if(this.chart != null && this.chart != "" && this.chart != undefined) {
     this.chart.dispose();//销毁
     this.chart.clear();
}
this.chart = this.$echarts.init(
     document.getElementById("chart" + index)
);- 定时器未清除(解决方法:clearTimeout(timeoutId)或者clearInterval(timer)); 
- 侦听器未清除; 
- 绑在EventBus的事件没有解绑(解决方法如下图); 
mounted () {
     this.$EventBus.$on('homeTask', res => this.func(res))
},
destroyed () {
     this.$EventBus.$off()
}- 使用了keep-alive(涉及到actived和deactivated钩子函数。组件移除时需要清理或改变数据,使用deactivated钩子函数) 
vue如何释放内存(防止内存泄漏):
- 在mounted/created 钩子中绑定了DOM/BOM 对象中的事件,需要清理dom上绑定的事件监听,同时将引用的dom设置为null; 
- 执行结束后清理定时器 或者 非必要不用定时器,可以使用nextTick代替; 
- 使用了事件监听$ on,需要在beforeDestroy 中做对应解绑($ off)处理; 
- 变量先申明后使用,闭包执行完成后,将引用的局部变量赋值为null; 
- 使用了第三方库初始化,需要在beforeDestroy 中做对应解绑处理eg: this.map.remove(); 
- 尽量使用原型对象去定义函数。 
参考:https://xie.infoq.cn/article/fce58cf917ba85db9f052861f
参考:https://blog.csdn.net/weixin_46884182/article/details/123997723










