做爰高潮a片〈毛片〉,尤物av天堂一区二区在线观看,一本久久A久久精品VR综合,添女人荫蒂全部过程av

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

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

來源:懂視網 責編:小采 時間:2020-11-27 22:22:30
文檔

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

淺談Vuejs中nextTick()異步更新隊列源碼解析:vue官網關于此解釋說明如下: vue2.0里面的深入響應式原理的異步更新隊列 官網說明如下: 只要觀察到數據變化,Vue 將開啟一個隊列,并緩沖在同一事件循環中發生的所有數據改變。如果同一個 watcher 被多次觸發,只會一次推入到隊列中。這種在緩沖時去除
推薦度:
導讀淺談Vuejs中nextTick()異步更新隊列源碼解析:vue官網關于此解釋說明如下: vue2.0里面的深入響應式原理的異步更新隊列 官網說明如下: 只要觀察到數據變化,Vue 將開啟一個隊列,并緩沖在同一事件循環中發生的所有數據改變。如果同一個 watcher 被多次觸發,只會一次推入到隊列中。這種在緩沖時去除

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()在此方法之前執行。

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

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

淺談Vuejs中nextTick()異步更新隊列源碼解析:vue官網關于此解釋說明如下: vue2.0里面的深入響應式原理的異步更新隊列 官網說明如下: 只要觀察到數據變化,Vue 將開啟一個隊列,并緩沖在同一事件循環中發生的所有數據改變。如果同一個 watcher 被多次觸發,只會一次推入到隊列中。這種在緩沖時去除
推薦度:
標簽: VUE js 異步更新
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 金秀| 东明县| 延寿县| 连云港市| 盱眙县| 平武县| 嘉义市| 呼玛县| 梅州市| 安西县| 娄烦县| 周宁县| 宜阳县| 汝南县| 肃宁县| 额敏县| 玛纳斯县| 专栏| 融水| 沙坪坝区| 常宁市| 固始县| 德化县| 集贤县| SHOW| 西吉县| 台北县| 成武县| 金山区| 安福县| 青河县| 尚志市| 威信县| 乐亭县| 融水| 邵阳县| 广灵县| 夏邑县| 门头沟区| 米易县| 龙泉市|