Vue中的nextTick函数

 Vue中的nextTick()函数

今天遇到一个比较隐蔽的问题，就是之前系统中操作百度Echarts的部分突然报错了，如下：

[Vue warn]: Error in created hook: "TypeError: Cannot read property 'getAttribute' of null"

网上查找资料后发现，原来我再created()钩子函数里就调用了画图的函数，而此时在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳。所以果断改为在mounted()钩子（因为该钩子函数执行时所有的DOM挂载和渲染都已完成）函数里调用画图函数，再次执行不报错了，完美解决！

后面发现Vue专门有个nextTick()回调函数可以解决上述问题， 因为该回调函数在DOM更新完成后就会调用，此时可以在该回调函数中进行任何对于DOM的操作。

以下是项目中相关代码：

drawLine () {
      this.$nextTick(() => {
        let timeChart = this.$echarts.init(
          document.getElementById('timeChart')
        )
        timeChart.setOption({
          title: {
            left: 'center',
            text: '等待时间'
          },
          tooltip: {},
          xAxis: {
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            name: 'ms',
            type: 'value'
          },
          series: [
            {
              name: '等待时间',
              type: 'line',
              data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
          ]
        })
      })
    }

 在生命周期函数中调用：

created () {
    this.drawLine()
},

完