vue使用v-if切换tab时echarts不渲染、内存泄露

100 阅读 0 评论 66 点赞

我是靠谱客的博主哭泣宝马，这篇文章主要介绍vue使用v-if切换tab时echarts不渲染、内存泄露，现在分享给大家，希望可以做个参考。

之前自己写tab，出现了很多bug，这里记录一下。

一、v-show

子组件和插件如果放在tab2加载会失效，除非首次加载的时候加载tab2。

转换思路，用v-if。

二、v-if

（1）页面切换回去时echarts不会渲染

这时候在切换tab的点击事件中使用$nextTick()回调echarts函数就可以解决问题。

复制代码

1
2
3
4
5
6
7
8
9
10
// 切换tab1和tab2
changeTab(active) {
  this.activeName = active;
  if (this.activeName == 0) {
    //回调echarts
    this.$nextTick(() => {
      this.draw_echarts();
    });
  } else {}
},

（2）因为页面内容过多，tab1的echarts泄露到tab2上，挤占tab2空间

这时候在切换tab的点击事件中打印tab1中id为"mychart"的div，是可以获取到html片段的，虽然tab2上并没有这个div。

这时候需要先用getInstanceByDom()获取到echarts实例，再用dispose()将其销毁。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
// 切换tab1和tab2
changeTab(active) {
  this.activeName = active;
  if (this.activeName == 0) {
    //回调echarts
    this.$nextTick(() => {
      this.draw_echarts();
    });
  } else {
    console.log(document.getElementById("mychart"));
    this.echarts.getInstanceByDom(document.getElementById("mychart")).dispose();
  }
},