首页 > 其他 > 详细

vue的nextTick使用场景

时间:2020-05-15 20:41:22      阅读:55      评论:0      收藏:0      [点我收藏+]

首先我们需要明白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 = "你知不知道"
    })
}

 

 

vue的nextTick使用场景

原文:https://www.cnblogs.com/qlongbg/p/12896414.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!