$nextTick(操作DOM的时候会用到)
- Vue在观察数据变化时并不是直接更新DOM,而是开启一个队列,并缓冲在同一事件循环中发生的所有数据改变
- 在缓冲时会去除重复数据,从而避免不必要的计算和DOM操作
- 然后,在下一个事件循环tick中,Vue刷新队列并执行实际(已去重的)工作。所以,如果你用一个for循环来动态改变数据100次,其实它只会应用最后一次改变,如果没有这种机制,DOM就要重绘100次,这固然是个很大的开销。
<div>
<button @click="show">$nextTick</button>
<div id="next" v-if="isShow">{{next}}</div>
</div>
show(){
this.isShow = true
// let dv = document.getElementById("next")
// console.log(dv) // null
this.$nextTick(() => {
let dv = document.getElementById("next")
console.log(dv) // <div>1</div>
})
}
事实上,在执行this.isShow = true的同时,div还没有被创建出来,直到写一个Vue事件循环,才开始创建。$nextTick就是用来知道什么时候DOM更新完成的。
理论上,我们应该不用主动去操作DOM,因为Vue的核心思想就是数据驱动DOM,但是在很多业务里,我们避免不了会使用一些第三方库,比如popper、sweper等,这些原生基于javaScript的库都有创建和更新及销毁的完整生命周期,与Vue配合使用,就要利用好$nextTick。