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; }) } } })();
新聞熱點
疑難解答
圖片精選