问题解决学习笔记

1.做echarts图表时，因为涉及到使用开关变量控制不同图表的显示隐藏，用 v-if 时会出现没有获取到dom结构而报错，所以改用 v-show，但是 v-show 本身是结构已经存在，当数据发生变化时，结构并未重新渲染，所以会出现 echarts 图表未获取到最外层大盒子的宽度而显示一半的情况：

• 百度了各种资料结果都以失败告终,最后使用一下定时器就好了,只需要设置延迟一秒,图表就可以正常显示。

2.vue+echarts 数据渲染正常,服务器数据接收后显示不出来：

/数据自动刷新，必然需要一个监听机制告诉Echarts重新设置数据
watch: {
  //观察option的变化
  option: {
    handler(newdata, olddata) {
      if (this.myChart) {
        if (newdata) {
          this.myChart.setOption(newdata);
        } else {
          this.myChart.setOption(olddata);
        }
      } else {
        this.init();
      }
    },
    deep: true //关键对象内部属性的监听
  }
},

数据虽然刷新了，但是我们的Echart’s组件却不知道，必须有个watch过程。

在生命周期mounted里面添加监听 ：

mounted() {
  let that = this 
  that.drawLine()
  window.addEventListener("resize", () => { 
    that.myEchartLine.resize();
  });
},

vue echarts数据产生变化从而Vue 中 强制组件重新渲染的正确方法:
强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。当我们需要重新渲染组件时，只需更 key 的值，Vue 就会重新渲染组件。这个是最简单的方法但是还有其他方法

方法一：重新加载整个页面 ——非常简单粗暴
方法二：使用 v-if ——该指令仅在组件为true时才渲染。如果为false，则该组件在DOM中不存在
来看看，v-if 是怎么工作的，在template中，添加v-if指令：

过程大致如下：

刚开始 renderComponent设置为true，因此渲染 my-component 组件

当我们调用forceRerender时，我们立即将renderComponent设置为false

我们停止渲染my-component，因为v-if指令现在计算结果为false

在nextTick方法中将renderComponent设置回true

当v-if指令的计算结果为true时，再次渲染my-component
在这个过程中，有两个部分比较重要
首先，我们必须等到nextTick，否则我们不会看到任何变化。
在Vue中，一个 tick 是一个DOM更新周期。Vue将收集在同一 tick 中进行的所有更新，在 tick 结束时，它将根据这些更新来渲染 DOM 中的内容。如果我们不等到next tick，我们对renderComponent的更新就会自动取消，什么也不会改变。其次，当我们第二次渲染时，Vue将创建一个全新的组件。Vue 将销毁第一个，并创建一个新的，这意味着我们的新my-component将像正常情况一样经历其所有生命周期-created，mounted等。另外，nextTick 可以与 promise 一起使用

方法三：使用Vue的内置forceUpdate方法 尚可

方法四：在组件上进行 key 更改 最好