Vuejs中怎么利用nextTick()實現(xiàn)異步更新隊列，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

我們擁有十多年網(wǎng)頁設(shè)計和網(wǎng)站建設(shè)經(jīng)驗，從網(wǎng)站策劃到網(wǎng)站制作，我們的網(wǎng)頁設(shè)計師為您提供的解決方案。為企業(yè)提供做網(wǎng)站、成都做網(wǎng)站、微信開發(fā)、小程序設(shè)計、成都手機(jī)網(wǎng)站制作、H5開發(fā)、等業(yè)務(wù)。無論您有什么樣的網(wǎng)站設(shè)計或者設(shè)計方案要求，我們都將富于創(chuàng)造性的提供專業(yè)設(shè)計服務(wù)并滿足您的需求。

源碼解析

方法原型以及解析注釋如下：

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下,需要強(qiáng)制刷新隊列,執(zhí)行上面的回調(diào)函數(shù)
        if (isIOS) { setTimeout(noop); }
      };

      //如果Promise不支持,但是支持MutationObserver(h6新特性,異步,當(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é)點(diǎn),并讓MutationObserver 監(jiān)視這個節(jié)點(diǎn);而 timeFunc正是改變這個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隊列
        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)里面(只不過是運(yùn)行在微觀隊列里面)，但是setTimeout的回調(diào)函數(shù)是運(yùn)行在下次時間循環(huán)里面。

優(yōu)先使用Promise的原因是MutationObserver在ios9.3.3以上版本的UIWebview中運(yùn)行一段時間后就停止了。
上面代碼的注釋已經(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實例
};

看完上述內(nèi)容，你們掌握Vuejs中怎么利用nextTick()實現(xiàn)異步更新隊列的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享名稱：Vuejs中怎么利用nextTick()實現(xiàn)異步更新隊列-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://aaarwkj.com/article48/gdshp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、小程序開發(fā)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司、建站公司、網(wǎng)站設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)