vue官網關于此解釋說明如下：
vue2.0里面的深入響應式原理的異步更新隊列
官網說明如下：
只要觀察到數據變化，Vue 將開啟一個隊列，并緩沖在同一事件循環中發生的所有數據改變。如果同一個 watcher 被多次觸發，只會一次推入到隊列中。這種在緩沖時去除重復數據對于避免不必要的計算和 DOM 操作上非常重要。然后，在下一個的事件循環“tick”中，Vue 刷新隊列并執行實際（已去重的）工作。Vue 在內部嘗試對異步隊列使用原生的 Promise.then 和 MutationObserver，如果執行環境不支持，會采用 setTimeout(fn, 0) 代替。
例如，當你設置 vm.someData = ‘new value' ，該組件不會立即重新渲染。當刷新隊列時，組件會在事件循環隊列清空時的下一個“tick”更新。多數情況我們不需要關心這個過程，但是如果你想在 DOM 狀態更新后做點什么，這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發人員沿著“數據驅動”的方式思考，避免直接接觸 DOM，但是有時我們確實要這么做。為了在數據變化之后等待 Vue 完成更新 DOM ，可以在數據變化之后立即使用 Vue.nextTick(callback) 。這樣回調函數在 DOM 更新完成后就會調用。例如
源碼解析
方法原型以及解析注釋如下：
var nextTick = (function () { var callbacks = []; // 存儲需要觸發的回調函數 var pending = false; // 是否正在等待的標識(false:允許觸發在下次事件循環觸發callbacks中的回調, true: 已經觸發過,需要等到下次事件循環) var timerFunc; // 設置在下次事件循環觸發callbacks的 觸發函數 //處理callbacks的函數 function nextTickHandler () { pending = false;// 可以觸發timeFunc var copies = callbacks.slice(0);//復制callback callbacks.length = 0;//清空callback for (var i = 0; i < copies.length; i++) { copies[i]();//觸發callback回調函數 } } //如果支持Promise,使用Promise實現 if (typeof Promise !== 'undefined' && isNative(Promise)) { var p = Promise.resolve(); var logError = function (err) { console.error(err); }; timerFunc = function () { p.then(nextTickHandler).catch(logError); // ios的webview下,需要強制刷新隊列,執行上面的回調函數 if (isIOS) { setTimeout(noop); } }; //如果Promise不支持,但是支持MutationObserver(h5新特性,異步,當dom變動是觸發,注意是所有的dom都改變結束后觸發) } else if (typeof MutationObserver !== 'undefined' && ( isNative(MutationObserver) || // PhantomJS and iOS 7.x MutationObserver.toString() === '[object MutationObserverConstructor]' )) { // use MutationObserver where native Promise is not available, // e.g. PhantomJS IE11, iOS7, Android 4.4 var counter = 1; var observer = new MutationObserver(nextTickHandler); //創建一個textnode dom節點,并讓MutationObserver 監視這個節點;而 timeFunc正是改變這個dom節點的觸發函數 var textNode = document.createTextNode(String(counter)); observer.observe(textNode, { characterData: true }); timerFunc = function () { counter = (counter + 1) % 2; textNode.data = String(counter); }; } else {// 上面兩種不支持的話,就使用setTimeout timerFunc = function () { setTimeout(nextTickHandler, 0); }; } //nextTick接受的函數, 參數1:回調函數 參數2:回調函數的執行上下文 return function queueNextTick (cb, ctx) { var _resolve;//用于接受觸發 promise.then中回調的函數 //向回調數據中pushcallback callbacks.push(function () { //如果有回調函數,執行回調函數 if (cb) { cb.call(ctx); } if (_resolve) { _resolve(ctx); }//觸發promise的then回調 }); if (!pending) {//是否執行刷新callback隊列 pending = true; timerFunc(); } //如果沒有傳遞回調函數,并且當前瀏覽器支持promise,使用promise實現 if (!cb && typeof Promise !== 'undefined') { return new Promise(function (resolve) { _resolve = resolve; }) } } })(); 我在注釋中解釋了nextTick()函數的邏輯
上面處理回調的三個方式的使用優先級的原因：因為Promise和MutationObserver和觸發的事件在同一個事件循環里面(只不過是運行在微觀隊列里面)，但是setTimeout的回調函數是運行在下次時間循環里面。
優先使用Promise的原因是MutationObserver在ios9.3.3以上版本的UIWebview中運行一段時間后就停止了。
上面代碼的注釋已經完全說明了代碼邏輯。簡單理解：將callback 推到隊列里面，如果還沒有執行過在下次事件循環執行觸發callback函數。
注意： 如果使用nextTick()不設置回調函數，而是使用Promise的方式設置回調函數，里面this并不是指向當前的Vue實例，而是指向window(嚴格模式是undefined)；
但是通過上面的分析可知：執行上下文是通過Promise.then()里的回調函數的第一個參數傳遞的。
nextTick()被使用的地方
1、他是全局Vue的一個函數，因此我們可以通過vue直接調用。
2、Vue系統中，用于處理dom更新的操作
Vue中有一個watcher，用于觀察數據的變化，然后更新dom。前面我們就知道Vue里面不是每一次數據改變都會觸發更新dom，而是將這些操作都緩存在一個隊列，在一個事件循環結束之后，刷新隊列，統一執行dom更新操作。
function queueWatcher (watcher) { var id = watcher.id; if (has[id] == null) { has[id] = true; if (!flushing) { queue.push(watcher); } else { // if already flushing, splice the watcher based on its id // if already past its id, it will be run next immediately. var i = queue.length - 1; while (i >= 0 && queue[i].id > watcher.id) { i--; } queue.splice(Math.max(i, index) + 1, 0, watcher); } // queue the flush if (!waiting) { waiting = true; nextTick(flushSchedulerQueue); } } }簡單說明上面代碼的邏輯，因為是watcher那里的代碼，以后會分析到。這里nextTick()的作用，是在此次事件循環結尾的時候刷新watcher檢查的dom更新操作。
3、局部Vue觸發$nextTick()，在dom更新后執行相應邏輯。
Vue.prototype.$nextTick = function (fn) { return nextTick(fn, this)// 設置nextTick回調函數的上下文環境是當前Vue實例};上面是renderMinxin中的一段代碼，也就是render模塊初始化的代碼。
總結
如果不了解它的代碼，我們會產生理解誤區。
1、nextTick()并不會重繪當前頁面，并且它也不是在頁面重繪才執行，而是在此次事件循環結束后一定會執行的。
2、此方法的觸發并不是在頁面更新完成才執行，第一條已經說了，但是為什么能在此方法中取到更新后的數據，那是因為dom元素的屬性已經在watcher執行flush隊列的時候改變了，因此是可以在此時獲取的。
證明上述觀點的實例：
h5有一個方法requestFrameAnimation(callback),此方法的回調是在頁面重繪之前調用。通過實驗，更新dom，nextTick()在此方法之前執行。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
