最近面試總是會被問到這麼一個問題：在使用vue的時候，將for循環中聲明的變量i從1增加到100，然後將i展示到頁面上，頁面上的i是從1跳到100，還是會怎樣？答案當然是只會顯示100，並不會有跳轉的過程。
怎麼可以讓頁面上有從1到100顯示的過程呢，就是用setTimeout或者Promise.then等方法去模擬。
講道理，如果不在vue裡，單獨運行這段程序的話，輸出一定是從1到100，但是為什麼在vue中就不一樣了呢？
for(let i=1; i<=100; i++){console.log(i);}複製代碼這就涉及到Vue底層的異步更新原理，也要說一說nextTick的實現。不過在說nextTick之前，有必要先介紹一下JS的事件運行機制。
JS運行機制
眾所周知，JS是基於事件循環的單線程的語言。執行的步驟大致是：
當代碼執行時，所有同步的任務都在主線程上執行，形成一個執行棧；在主線程之外還有一個任務隊列(task queue)，只要異步任務有了運行結果就在任務隊列中放置一個事件；一旦執行棧中所有同步任務執行完畢（主線程代碼執行完畢），此時主線程不會空閒而是去讀取任務隊列。此時，異步的任務就結束等待的狀態被執行。主線程不斷重複以上的步驟。
我們把主線程執行一次的過程叫一個tick，所以nextTick就是下一個tick的意思，也就是說用nextTick的場景就是我們想在下一個tick做一些事的時候。
所有的異步任務結果都是通過任務隊列來調度的。而任務分為兩類：宏任務(macro task)和微任務(micro task)。它們之間的執行規則就是每個宏任務結束後都要將所有微任務清空。常見的宏任務有setTimeout/MessageChannel/postMessage/setImmediate，微任務有MutationObsever/Promise.then。
想要透徹學習事件循環，推薦Jake在JavaScript全球開發者大會的演講，保證講懂！
nextTick原理
派發更新
大家都知道vue的響應式的靠依賴收集和派發更新來實現的。在修改數組之後的派發更新過程，會觸發setter的邏輯，執行dep.notify()：
// src/core/observer/watcher.jsclassDep {notify() {//subs是Watcher的實例數組const subs = this.subs.slice()for(let i=0, l=subs.length; i<l; i++){ subs[i].update() } }}複製代碼遍歷subs裡每一個Watcher實例，然後調用實例的update方法，下面我們來看看update是怎麼去更新的：
classWatcher {update() { ...//各種情況判斷之後else{ queueWatcher(this) } }}複製代碼update執行後又走到了queueWatcher，那就繼續去看看queueWatcher幹啥了(希望不要繼續套娃了:
//queueWatcher 定義在 src/core/observer/scheduler.jsconst queue: Array<Watcher> = []let has: { [key: number]: ?true } = {}let waiting = falselet flushing = falselet index = 0exportfunctionqueueWatcher(watcher: Watcher) {const id = watcher.id//根據id是否重複做優化if(has[id] == null){ has[id] = trueif(!flushing){ queue.push(watcher) }else{let i=queue.length - 1while(i > index && queue[i].id > watcher.id){ i-- } queue.splice(i + 1, 0, watcher) }if(!waiting){ waiting = true//flushSchedulerQueue函數: Flush both queues and run the watchers nextTick(flushSchedulerQueue) } }}複製代碼這裡queue在pushwatcher時是根據id和flushing做了一些優化的，並不會每次數據改變都觸發watcher的回調，而是把這些watcher先添加到個隊列，然後在nextTick後執flushSchedulerQueue。
flushSchedulerQueue函數是保存更新事件的queue的一些加工，讓更新可以滿足Vue更新的生命周期。
這裡也解釋了為什麼for循環不能導致頁面更新，因為for是主線程的代碼，在一開始執行數據改變就會將它push到queue裡，等到for裡的代碼執行完畢後i的值已經變化為100時，這時vue才走到nextTick(flushSchedulerQueue)這一步。
nextTick源碼
接著打開vue2.x的源碼，目錄core/util/next-tick.js，代碼量很小，加上注釋才110行，是比較好理解的。
const callbacks = []let pending = falseexportfunctionnextTick (cb?: Function, ctx?: Object) {let _resolve callbacks.push(() => {if (cb) {try { cb.call(ctx) } catch (e) { handleError(e, ctx, 'nextTick') } } elseif (_resolve) { _resolve(ctx) } })if (!pending) { pending = true timerFunc() }複製代碼首先將傳入的回調函數cb（上節的flushSchedulerQueue）壓入callbacks數組，最後通過timerFunc函數一次性解決。
let timerFuncif (typeofPromise !== 'undefined' && isNative(Promise)) {const p = Promise.resolve() timerFunc = () => { p.then(flushCallbacks)if (isIOS) setTimeout(noop) } isUsingMicroTask = true} elseif (!isIE && typeof MutationObserver !== 'undefined' && ( isNative(MutationObserver) ||// PhantomJS and iOS 7.x MutationObserver.toString() === '[object MutationObserverConstructor]')) {let counter = 1const observer = new MutationObserver(flushCallbacks)const textNode = document.createTextNode(String(counter)) observer.observe(textNode, { characterData: true }) timerFunc = () => { counter = (counter + 1) % 2 textNode.data = String(counter) } isUsingMicroTask = true} elseif (typeof setImmediate !== 'undefined' && isNative(setImmediate)) { timerFunc = () => { setImmediate(flushCallbacks) }} else { timerFunc = () => {setTimeout(flushCallbacks, 0) }}複製代碼timerFunc下面一大片if else是在判斷不同的設備和不同情況下選用哪種特性去實現異步任務：優先檢測是否原生持Promise，不持的話再去檢測是否持MutationObserver，如果都不行就只能嘗試宏任務實現，首先是setImmediate，這是個版本 IE 和 Edge 才持的特性，如果都不持的話最後就會降級為 setTimeout 0。
這使callbacks不是直接在nextTick中執回調函數的原因是保證在同個 tick 內多次執nextTick，不會開啟多個異步任務，把這些異步任務都壓成個同步任務，在下個 tick 執完畢。
nextTick使用
nextTick不僅是vue的源碼文件，更是vue的一個全局API。下面來看看怎麼使用吧。
當設置 vm.someData = 'new value'，該組件不會立即重新渲染。當刷新隊列時，組件會在下一個事件循環tick中更新。多數情況我們不需要關心這個過程，但是如果你想基於更新後的 DOM 狀態來做點什麼，這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發人員使用數據驅動的方式思考，避免直接接觸 DOM，但是有時我們必須要這麼做。為了在數據變化之後等待 Vue 完成更新 DOM，可以在數據變化之後立即使用Vue.nextTick(callback)。這樣回調函數將在 DOM 更新完成後被調用。
官網用例：
<div id="example">{{message}}</div>複製代碼var vm = new Vue({ el: '#example', data: { message: '123' }})vm.message = 'new message'// 更改數據vm.$el.textContent === 'new message'// falseVue.nextTick(function () { vm.$el.textContent === 'new message'// true})複製代碼並且因為$nextTick() 返回一個 Promise 對象，所以也可以使用async/await 語法去處理事件，非常方便。