Vue中v-show/v-if切换后echarts宽高问题和不显示问题

在项目中发现，tab切换页面使用v-show时，echarts图表的宽高变成100px，因此改为用v-if切换。

但是v-if切换后echarts图表为空白，不显示。

这是因为在切换后并没有触发生命周期函数，没有获取到dom结构。

解决方法：

用vue的nextTick()方法，

nextTick()：在下次 DOM 更新循环结束之后执行延迟回调。为了在修改数据之后获取更新后的 DOM，就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码。可以理解为：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数。

监听tab切换，并在切换后执行的方法内使用：

    watch: {
      orgNoValue: 'updateCity',
    },    
    updateCity() {
      this.$nextTick(() => {
        this.initFunc()  // 包括获取echarts的option的方法
      })
    },

v-if和v-show的区别

v-if：当隐藏结构时该结构会直接从整个dom树中移除；(删除重构DOM)
v-show：当隐藏结构时是在该结构的style中加上display:none，结构依然保留。(改变style)