淺析Vue中$nextTick的原理

一、$nextTick有什麼用？

1. Vue是異步渲染的架構。
2. data改變之後，DOM不會立刻渲染。
3. $nextTick會在DOM渲染之後被觸發，以擷取最新的DOM節點。
4. 連續多次的異步渲染，$nextTick隻會執行最後一次渲染後的結果。

二、$nextTick的原理

$nextTick主要通過事件循環中的任務隊列的方式異步執行傳入的回調函數，首先會判斷目前的執行環境是否支援Promise，MutationObserver，setImmediate，setTimeout。如果支援則建立對應的異步方法，這裡的MutationObserver并不是監聽DOM，而是利用其微任務特性。需要注意的是更新DOM的方法也是通過nextTick進行調用的，是以就可以實作傳入$.nextTick的回調函數在DOM渲染完成之後執行這些微任務。

三、循環調用的話nextTick裡面有容錯機制嗎？

多次調用 nextTick 會将方法存入隊列 callbacks 中，通過這個異步方法清空目前隊列。