vue2.0中使用v-if/v-show切换后echarts不显示和宽高问题

需求描述

使用ehcarts时，请求数据时加loading,请求结束后取消loading并显示图表

问题描述

最开始使用v-if和v-else判断，loading状态改变时，echarts直接不显示，打开F12也无图表对象渲染。

问题解析

v-if：当隐藏结构时该结构会直接从整个dom树中移除(删除重构DOM)

因为在切换后并没有触发生命周期函数，没有获取到dom结构，而无论是v-if或v-else-if或v-else，都不能和ref一起使用，而且不论是直接使用，还是在子元素上使用ref，都会获取不到真实dom元素的。

解决方案

使用v-show替代（不推荐）

v-show：当隐藏结构时是在该结构的style中加上display:none，结构依然保留。(改变style)

所以使用v-show在什么情况都能获取真实dom。

但新的问题，tab切换页面使用v-show时，echarts图表的宽高变成100px，因为v-show 本身是结构已经存在，当数据发生变化时，结构并未重新渲染，会出现 echarts 图表未获取到最外层大盒子的宽度而显示错误的情况。

v-if使用$nextTick（推荐）

this.$nextTick()原理：

• Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。
• Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
• 首先修改数据，这是同步任务。同一事件循环的所有的同步任务都在主线程上执行，形成一个执行栈，此时还未涉及 DOM 。
• 然后Vue 开启一个异步队列，并缓冲在此事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。

  this.$nextTick(() => {
     this.initLineCharts(lineData);
    //nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后立即使用 $nextTick，则可以在回调中获取更新后的 DOM。
    //所以使用v-if后能获取到dom元素了
 })
1
2
3
4
5