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

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

一、v-show

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

转换思路，用v-if。

二、v-if

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

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

// 切换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()将其销毁。

// 切换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();
  }
},

最后

以上就是哭泣宝马为你收集整理的vue使用v-if切换tab时echarts不渲染、内存泄露的全部内容，希望文章能够帮你解决vue使用v-if切换tab时echarts不渲染、内存泄露所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。