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。