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

var nextTick = (function () {
 var callbacks = []; // 存儲(chǔ)需要觸發(fā)的回調(diào)函數(shù)
 var pending = false; // 是否正在等待的標(biāo)識(shí)(false:允許觸發(fā)在下次事件循環(huán)觸發(fā)callbacks中的回調(diào), true: 已經(jīng)觸發(fā)過(guò),需要等到下次事件循環(huán))
 var timerFunc; // 設(shè)置在下次事件循環(huán)觸發(fā)callbacks的 觸發(fā)函數(shù)

 //處理callbacks的函數(shù)
 function nextTickHandler () {
 pending = false;// 可以觸發(fā)timeFunc
 var copies = callbacks.slice(0);//復(fù)制callback
 callbacks.length = 0;//清空callback
 for (var i = 0; i < copies.length; i++) {
 copies[i]();//觸發(fā)callback回調(diào)函數(shù)
 }
 }

 //如果支持Promise,使用Promise實(shí)現(xiàn)
 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下,需要強(qiáng)制刷新隊(duì)列,執(zhí)行上面的回調(diào)函數(shù)
 if (isIOS) { setTimeout(noop); }
 };

 //如果Promise不支持,但是支持MutationObserver(h5新特性,異步,當(dāng)dom變動(dòng)是觸發(fā),注意是所有的dom都改變結(jié)束后觸發(fā))
 } 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);
 //創(chuàng)建一個(gè)textnode dom節(jié)點(diǎn),并讓MutationObserver 監(jiān)視這個(gè)節(jié)點(diǎn);而 timeFunc正是改變這個(gè)dom節(jié)點(diǎn)的觸發(fā)函數(shù)
 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接受的函數(shù), 參數(shù)1:回調(diào)函數(shù) 參數(shù)2:回調(diào)函數(shù)的執(zhí)行上下文
 return function queueNextTick (cb, ctx) {
 var _resolve;//用于接受觸發(fā) promise.then中回調(diào)的函數(shù)
 //向回調(diào)數(shù)據(jù)中pushcallback
 callbacks.push(function () {
 //如果有回調(diào)函數(shù),執(zhí)行回調(diào)函數(shù)
 if (cb) { cb.call(ctx); }
 if (_resolve) { _resolve(ctx); }//觸發(fā)promise的then回調(diào)
 });
 if (!pending) {//是否執(zhí)行刷新callback隊(duì)列
 pending = true;
 timerFunc();
 }
 //如果沒(méi)有傳遞回調(diào)函數(shù),并且當(dāng)前瀏覽器支持promise,使用promise實(shí)現(xiàn)
 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)// 設(shè)置nextTick回調(diào)函數(shù)的上下文環(huán)境是當(dāng)前Vue實(shí)例
};