网站服务器到期为什么要网站备案,怎么设置微信公众号,专业网站建设分为8步,网站被黑能黑多长时间Vue Echarts页面内存占用高问题解决
1.问题描述
目前使用的是Vue2 Echarts4.x的组合#xff0c;页面如下所示。
就是一个类似于神策的数据看板页面#xff0c;左侧是一个导航栏#xff0c;右侧看板页面中包含很多个报表图片#xff0c;其中报表页面中对Echarts图表进…Vue Echarts页面内存占用高问题解决
1.问题描述
目前使用的是Vue2 Echarts4.x的组合页面如下所示。
就是一个类似于神策的数据看板页面左侧是一个导航栏右侧看板页面中包含很多个报表图片其中报表页面中对Echarts图表进行了二次封装。点击左侧的菜单可以切换不同的看板有些看板页面中的报表比较多用户多次切换后页面的内存占用可以上升为GB级。严重时导致页面内存溢出使得页面崩溃极大影响了用户体验。
2.解决方法
参考了多篇文章发现有可能是EchartsVue2中组件销毁时不会自动释放掉组件中持有的Echarts实例对象。因此只需要在组件销毁的时候主动销毁掉其持有的Echarts实例对象即可。
普通Vue项目可使用如下方式。
data(){return {MyEchart: null,}
}
initEcharts(){// ....
}
// ....
beforeDestroy(){if(this.MyEchart){this.MyEchart.dispose();this.MyEchartnull;}
}Vue2 TyepScript项目使用如下方式。
private MyEchart: any null;private initEcharts(): void {// ...
}beforeDestroy(): void{if(this.MyEchart){this.MyEchart.dispose();this.MyEchartnull;}
}参考文章
https://zhuanlan.zhihu.com/p/585392877https://blog.csdn.net/weixin_47409897/article/details/129174801
