淺談Vuejs中nextTick()異步更新隊列源碼解析

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;
 })
 }
 }
 })();

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);
 }
 }
 }

Vue.prototype.$nextTick = function (fn) {
 return nextTick(fn, this)// 設置nextTick回調函數的上下文環境是當前Vue實例
};