淺談Vuejs中nextTick()異步更新隊列源碼解析
vue官網(wǎng)關(guān)于此解釋說明如下:
vue2.0里面的深入響應(yīng)式原理的異步更新隊列
官網(wǎng)說明如下:
只要觀察到數(shù)據(jù)變化,Vue 將開啟一個隊列,并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。如果同一個 watcher 被多次觸發(fā),只會一次推入到隊列中。這種在緩沖時去除重復(fù)數(shù)據(jù)對于避免不必要的計算和 DOM 操作上非常重要。然后,在下一個的事件循環(huán)“tick”中,Vue 刷新隊列并執(zhí)行實際(已去重的)工作。Vue 在內(nèi)部嘗試對異步隊列使用原生的 Promise.then 和 MutationObserver,如果執(zhí)行環(huán)境不支持,會采用 setTimeout(fn, 0) 代替。
例如,當(dāng)你設(shè)置 vm.someData = ‘new value' ,該組件不會立即重新渲染。當(dāng)刷新隊列時,組件會在事件循環(huán)隊列清空時的下一個“tick”更新。多數(shù)情況我們不需要關(guān)心這個過程,但是如果你想在 DOM 狀態(tài)更新后做點什么,這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發(fā)人員沿著“數(shù)據(jù)驅(qū)動”的方式思考,避免直接接觸 DOM,但是有時我們確實要這么做。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM ,可以在數(shù)據(jù)變化之后立即使用 Vue.nextTick(callback) 。這樣回調(diào)函數(shù)在 DOM 更新完成后就會調(diào)用。例如
源碼解析
方法原型以及解析注釋如下:
var nextTick = (function () { var callbacks = []; // 存儲需要觸發(fā)的回調(diào)函數(shù) var pending = false; // 是否正在等待的標(biāo)識(false:允許觸發(fā)在下次事件循環(huán)觸發(fā)callbacks中的回調(diào), true: 已經(jīng)觸發(fā)過,需要等到下次事件循環(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實現(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下,需要強制刷新隊列,執(zhí)行上面的回調(diào)函數(shù) if (isIOS) { setTimeout(noop); } }; //如果Promise不支持,但是支持MutationObserver(h5新特性,異步,當(dāng)dom變動是觸發(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)建一個textnode dom節(jié)點,并讓MutationObserver 監(jiān)視這個節(jié)點;而 timeFunc正是改變這個dom節(jié)點的觸發(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隊列 pending = true; timerFunc(); } //如果沒有傳遞回調(diào)函數(shù),并且當(dāng)前瀏覽器支持promise,使用promise實現(xiàn) if (!cb && typeof Promise !== 'undefined') { return new Promise(function (resolve) { _resolve = resolve; }) } } })();
我在注釋中解釋了nextTick()函數(shù)的邏輯
上面處理回調(diào)的三個方式的使用優(yōu)先級的原因:因為Promise和MutationObserver和觸發(fā)的事件在同一個事件循環(huán)里面(只不過是運行在微觀隊列里面),但是setTimeout的回調(diào)函數(shù)是運行在下次時間循環(huán)里面。
優(yōu)先使用Promise的原因是MutationObserver在ios9.3.3以上版本的UIWebview中運行一段時間后就停止了。
上面代碼的注釋已經(jīng)完全說明了代碼邏輯。簡單理解:將callback 推到隊列里面,如果還沒有執(zhí)行過在下次事件循環(huán)執(zhí)行觸發(fā)callback函數(shù)。
注意: 如果使用nextTick()不設(shè)置回調(diào)函數(shù),而是使用Promise的方式設(shè)置回調(diào)函數(shù),里面this并不是指向當(dāng)前的Vue實例,而是指向window(嚴(yán)格模式是undefined);
但是通過上面的分析可知:執(zhí)行上下文是通過Promise.then()里的回調(diào)函數(shù)的第一個參數(shù)傳遞的。
nextTick()被使用的地方
1、他是全局Vue的一個函數(shù),因此我們可以通過vue直接調(diào)用。
2、Vue系統(tǒng)中,用于處理dom更新的操作
Vue中有一個watcher,用于觀察數(shù)據(jù)的變化,然后更新dom。前面我們就知道Vue里面不是每一次數(shù)據(jù)改變都會觸發(fā)更新dom,而是將這些操作都緩存在一個隊列,在一個事件循環(huán)結(jié)束之后,刷新隊列,統(tǒng)一執(zhí)行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()的作用,是在此次事件循環(huán)結(jié)尾的時候刷新watcher檢查的dom更新操作。
3、局部Vue觸發(fā)$nextTick(),在dom更新后執(zhí)行相應(yīng)邏輯。
Vue.prototype.$nextTick = function (fn) { return nextTick(fn, this)// 設(shè)置nextTick回調(diào)函數(shù)的上下文環(huán)境是當(dāng)前Vue實例 };
上面是renderMinxin中的一段代碼,也就是render模塊初始化的代碼。
總結(jié)
如果不了解它的代碼,我們會產(chǎn)生理解誤區(qū)。
1、nextTick()并不會重繪當(dāng)前頁面,并且它也不是在頁面重繪才執(zhí)行,而是在此次事件循環(huán)結(jié)束后一定會執(zhí)行的。
2、此方法的觸發(fā)并不是在頁面更新完成才執(zhí)行,第一條已經(jīng)說了,但是為什么能在此方法中取到更新后的數(shù)據(jù),那是因為dom元素的屬性已經(jīng)在watcher執(zhí)行flush隊列的時候改變了,因此是可以在此時獲取的。
證明上述觀點的實例:
h5有一個方法requestFrameAnimation(callback),此方法的回調(diào)是在頁面重繪之前調(diào)用。通過實驗,更新dom,nextTick()在此方法之前執(zhí)行。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue在使用ECharts時的異步更新和數(shù)據(jù)加載詳解
- vue的狀態(tài)更新方式(異步更新解決)
- VUE異步更新DOM - 用$nextTick解決DOM視圖的問題
- 詳解Vue的異步更新實現(xiàn)原理
- vue中的任務(wù)隊列和異步更新策略(任務(wù)隊列,微任務(wù),宏任務(wù))
- vue中$nextTick的用法講解
- Vue中this.$nextTick的作用及用法
- Vue中的nextTick作用和幾個簡單的使用場景
- Vue中this.$nextTick()的理解與使用方法
- 簡單理解Vue中的nextTick方法
- vue2.0$nextTick監(jiān)聽數(shù)據(jù)渲染完成之后的回調(diào)函數(shù)方法
- 深入理解Vue nextTick 機(jī)制
- Vue2異步更新及nextTick原理詳解
相關(guān)文章
Vue3+vantUI3時間組件封裝過程支持選擇年以及年月日時分秒
這篇文章主要介紹了Vue3+vantUI3時間組件封裝過程支持選擇年以及年月日時分秒,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07vue前端開發(fā)輔助函數(shù)狀態(tài)管理詳解示例
vue的應(yīng)用狀態(tài)管理提供了mapState、mapGetters、mapMutations、mapActions四個輔助函數(shù),所謂的輔助函數(shù)分別對State、Getters、Mutations、Actions在完成狀態(tài)的使用進(jìn)行簡化2021-10-10