首先我们需要明白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 = "你知不知道" }) }
原文:https://www.cnblogs.com/qlongbg/p/12896414.html