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。