vue内存泄露问题及处理方法
vue内存泄露问题及处理方法
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
更多推荐
所有评论(0)