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。