Vue.$nextTick详解

$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。