Vue文檔中對nextTick關於nextTick的介紹語焉不詳,官網的解釋如下：
在下次 DOM 更新循環結束之後執行延遲迴調。在修改數據之後立即使用這個方法，獲取更新後的 DOM
那麼nextTick的應用場景是什麼？光說不練假把式，先上代碼。
測試代碼很簡單，重點在於 methods裡面的changeMsg方法。
- 我們修改了data裡的message的數據。
- 我們希望messageOne能夠獲取到DOM元素 messageDiv裡面的內容。
那麼我們再看下運行結果看看是不是我們想要的
我們看到 使用了this.nextTick方法的結果是我們想要的結果，而直接獲取數據的方式並沒有拿到最新的數據。
我們為什麼要使用nextTick呢？
官網中的解釋如下：
Vue 異步執行 DOM 更新。只要觀察到數據變化，Vue 將開啟一個隊列，並緩衝在同一事件循環中發生的所有數據改變。如果同一個 watcher 被多次觸發，只會被推入到隊列中一次。這種在緩衝時去除重複數據對於避免不必要的計算和 DOM 操作上非常重要。然後，在下一個的事件循環“tick”中，Vue 刷新隊列並執行實際 (已去重的) 工作。Vue 在內部嘗試對異步隊列使用原生的 Promise.then 和MessageChannel，如果執行環境不支持，會採用 setTimeout(fn, 0)代替。
例如，當你設置 vm.someData = 'new value'，該組件不會立即重新渲染。當刷新隊列時，組件會在下一個事件循環“tick”中更新。多數情況我們不需要關心這個過程，但是如果你想基於更新後的 DOM 狀態來做點什麼，這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發人員使用“數據驅動”的方式思考，避免直接接觸 DOM，但是有時我們必須要這麼做。為了在數據變化之後等待 Vue 完成更新 DOM，可以在數據變化之後立即使用 Vue.nextTick(callback)。這樣回調函數將在 DOM 更新完成後被調用。
說了一大堆，總結一下（面試的時候可能用被問到）到簡單概況起來就是：
- Vue中DOM的更新是異步的。
- 雖然Vue一直強調的是數據驅動視圖，但是，有時候不可避免要操作DOM的。
- 在數據變化之後等待 Vue 完成更新 DOM這是一個異步執行的過程，需要用nextTick來搞定。
nextTick使用情景
在Vue生命週期的created()鉤子函數進行的DOM操作的時候需要要放在Vue.nextTick()的回調函數中。
為啥呢？如果不熟悉created()鉤子的話可以再翻看一下Vue的生命週期，created函數執行的時候DOM元素還沒有進行過渲染，這個時候操作DOM毛用也沒有，所以需要將DOM操作放在Vue.nextTick()的回調方法中去搞定。
當然你可以選擇在mounted()鉤子裡去操作DOM，這個時候所有的DOM都掛載到跟元素上並渲染完畢了。這個時候操作DOM元素是沒有任何問題的。
數據變化後要執行的某個操作，而這個操作需要使用隨數據改變而改變的DOM結構的時候，這個操作都應該放進Vue.nextTick()的回調函數中。
nextTick 函數的實現原理
簡單說說面試的時候可以拿去吹牛逼。寫太多怕大家也不喜歡看。
- 先定義了一個callbacks 存放所有的nextTick裡的回調函數
- 然後判斷一下當前的瀏覽器內核是否支持 Promise，如果支持，就用Promise來觸發回調函數
- 如果不支持Promise再看看是否支持MutationObserver，是一個可以監聽DOM結構變化的接口，觀察文本節點發生變化時，觸發執行所有回調函數。
- 如果以上都不支持就只能用setTimeout來完成異步執行了。
閱讀更多 前端講書人麥克黑 的文章
