vue.js的this.$nextTick()使用场景

重点：vue的this.$nextTick()作用将回调延迟到下次 DOM 更新循环之后执行

一般使用场景：

1、在钩子函数created()里面想要获取dom的内容或者操作dom，但是这个时候只是虚拟dom，实际dom操作不了，所以在这里可以用this.$nextTick()，这样等dom更新完了再执行this.$nextTick()里面的回调，这样就可以操作或者获取dom的内容了

例如：想要在created()里初始化echart的图表

//template

<div ref="chart"></div>

//script

created() {
   this.$echarts.init(this.$refs.chart)
}

执行结果报错如下：

用this.$nextTick()就不会报错了

created() {
  this.$nextTick(()=>{
    this.$echarts.init(this.$refs.chart)
  })
}

2、当你更新了data里面的内容之后，想要立即获取dom的内容，但是这个时候获取到的还是赋值之前的内容，因为dom还没有更新，所以这个时候可以用this.$nextTick还是处理获取dom内容之后的操作。因为this.$nextTick()是等待dom更新完才会执行的回调。