vue的nextTick使用场景

首先我们需要明白vue是依靠数据驱动视图更新的，而该更新的过程是异步的

换种说法也就是：Vue在侦听到你的数据发生变化时， 将开启一个队列（该队列被Vue官方称为异步更新队列），而视图需要等队列中所有数据变化完成之后，再统一进行更新。

这就是我们通常在数据变化后获取节点使用this.$nextTick()的原因

 

那我们的nextTick使用场景便是在：

1.获取数据更新之后的DOM

<p ref="myText">{{text}}</p>


change () {
      this.text = '在远方的时候';
      this.$nextTick(() => {
          // 输出结果：在远方的时候
          console.log(this.$refs.myText.innerText)  
      })
}

2.created()中进行DOM操作

created () {
    this.$nextTick(()=>{
        this.$refs.myText.innerText = "你知不知道"
    })
}