$nextTick()

$nextTick() 會在確定 DOM 全部掛載與渲染完成之後，才會去執行$nextTick() 內的內容。

在 vue 的雙向綁定中，當資料被更改時，DOM 並不會立刻跟著更新，而是會等到所有數據變化完成之後才會統一更新資料。假設我們今天設了一個 watch 監聽，並且它當下被迴圈觸發了 100 次，如果今天 vue 是採取同步更新策略的話，那我們就需要更新這筆資料 100 次。

<div> {{ count }} </div>

data(){
    return{
        count:0
    }
},
watch:{
    count(){
       for(let i = 0; i < 100; i++) {
        this.count = i
       }
    }
}

好的，現在我們知道 vue 為什麼要採取異步更新了。那你說這跟 $nextTick() 有什麼關係？

欸？我們不是已經在 mounted 更動了 count的資料嗎，啊怎麼是舊的資料＠＠

<div ref="count"> {{ count }} </div>

data(){
    return{
        count:0
    }
},
mounted(){
    this.count = 5;
    console.log(this.$refs.count.innerHTML) //  0 
    this.$nextTick(()=>{
        console.log(this.$refs.count) // 5
    })
}

這是因為我們還沒有等待 DOM 的異步更新完成，就對 DOM 執行了操作，此時我們操作的是還沒被更新的 DOM。如果要取得被更新後的資料，我們就得使用 $nextTick()

在 created 要操作資料一定要用 $nextTick()

在 created 生命週期當中，由於 DOM 還尚未進行渲染，所以我們是無法操作 DOM 的。要想操作 DOM 的話，我們一樣需要透過 $nextTick() 來完成。

data(){
    return{
        count:0
    }
},
created(){
    this.$nextTick(() => {
      this.count = 5;
      console.log(this.$refs.count) // <div>5</div>
    });
}

參考文章 :
不只懂 Vue 語法：為什麼需要使用 $nextTick ？
简单理解Vue中的nextTick
[Day 19] Vue nextTick 處理完成後就換我!