vue导致内存溢出的原因:

  1. 接口数据量巨大,前端渲染时占用大量内存(解决方法:限制接口的返回数据,或者前端显示分批分页展示数据);

  1. v-if 频繁增删DOM节点(解决方法:离开页面时将控制v-if的变量设置为null);

  1. 代码中存在死循环或递归调用(解决方法:优化代码);

  1. 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)
);
  1. 定时器未清除(解决方法:clearTimeout(timeoutId)或者clearInterval(timer));

  1. 侦听器未清除;

  1. 绑在EventBus的事件没有解绑(解决方法如下图);

mounted () {
     this.$EventBus.$on('homeTask', res => this.func(res))
},
destroyed () {
     this.$EventBus.$off()
}
  1. 使用了keep-alive(涉及到actived和deactivated钩子函数。组件移除时需要清理或改变数据,使用deactivated钩子函数)

vue如何释放内存(防止内存泄漏):

  1. 在mounted/created 钩子中绑定了DOM/BOM 对象中的事件,需要清理dom上绑定的事件监听,同时将引用的dom设置为null;

  1. 执行结束后清理定时器 或者 非必要不用定时器,可以使用nextTick代替;

  1. 使用了事件监听$ on,需要在beforeDestroy 中做对应解绑($ off)处理;

  1. 变量先申明后使用,闭包执行完成后,将引用的局部变量赋值为null;

  1. 使用了第三方库初始化,需要在beforeDestroy 中做对应解绑处理eg: this.map.remove();

  1. 尽量使用原型对象去定义函数。

参考:https://xie.infoq.cn/article/fce58cf917ba85db9f052861f

参考:https://blog.csdn.net/weixin_46884182/article/details/123997723

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐