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 = "你知不知道"
    })
}

 

猜你喜欢

转载自www.cnblogs.com/qlongbg/p/12896414.html