在vue中使用echart卡顿和内存溢出的问题

友情链接：
查看页面内存使用情况点击这里；

内存溢出原因：

如果在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官方避免内存泄漏方法：

点击进入链接