在vue中使用echart卡顿和内存溢出的问题
友情链接:查看页面内存使用情况点击这里;内存溢出原因:如果在mounted/created 钩子中使用了第三方库初始化(比如echarts),需要在beforeDestroy 中做对应销毁处理。如果没有及时销毁,会造成每次进入该页面时都会创建一遍这个实例。而且vue是单页面应用,页面路由切换后,内存未释放。所以需要我们手动在生命周期beforeDestroy 的时候及时销毁。代码案例:before
·
友情链接:
查看页面内存使用情况点击这里;
内存溢出原因:
如果在mounted/created 钩子中使用了第三方库初始化(比如echarts),需要在beforeDestroy 中做对应销毁处理。如果没有及时销毁,会造成每次进入该页面时都会创建一遍这个实例。而且vue是单页面应用,页面路由切换后,内存未释放。所以需要我们手动在生命周期beforeDestroy 的时候及时销毁。如果使用了keep-alive会导致生命周期beforeDestroy 失效,此时你可以转而使用生命周期deactivated或者在该页面不使用keep-alive。
代码案例:
beforeDestroy() {
if (this.myChart) {
this.myChart.clear()
this.myChart.dispose()
this.myChart = null
window.removeEventListener('resize', () => { this.myChart.resize() })
}
},
上面代码在beforeDestroy时及时销毁echarts实例。
卡顿原因:
数据量大及某个时间段内存不足
解决方案:
1.不要把实例放在data里
2.beforeDestroy等生命周期及时销毁实例
3.在this.$nextTick后进行图表渲染
4.控制定时器的使用,init之前销毁已经存在的echarts实例
Vue官方避免内存泄漏方法:
更多推荐
已为社区贡献39条内容
所有评论(0)