vue 中 v-if 和 v-else 内容穿插的bug

当我使用 v-if 和 v-else 分别渲染 有值 和 没有值的情况下展示不同的视图时，惊奇的一幕发生了，v-else 生效时，v-if中的视图内容居然移动到了 v-else中！！！

以下列代码为例： 当data 不为 undefined 的时候渲染 暂无数据, 但当 data为undefined的时候，v-if中 antv g2 自动渲染出来的图表居然移动到了 v-else 中!!!!

  ...html
  <!--渲染 antv g2 图表-->
  <div v-if="data">
    <!--假设这里是antv g2 自动渲染出来的-->
    <div class='chart'></div>
  </div>
  <div v-else>
    暂无数据
  </div>
  ...js
  data(){
    return {
      data: undefined
    }
  }

解决

可能的原因是vue的diff 算法出了文日，将v-if 和v-else 这两个节点认为是相同节点，只是对比的差异，没有重新创建。 只需要在 这两个节点上设置不同的key就可以解决这个问题，重新渲染。

  <div v-if="data" key="chart">
    <!--假设这里是antv g2 自动渲染出来的-->
    <div class='chart'></div>
  </div>
  <div v-else key="nodata">
    暂无数据
  </div>