為什么要用vue中的nextTick-創(chuàng)新互聯(lián)

小編給大家分享一下為什么要用vue中的nextTick，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站公司2013年成立，先為安福等服務(wù)建站，安福等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為安福企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

為什么要用nextTick

請(qǐng)看如下一段代碼

new Vue({
  el: '#app',
  data: {
    list: []
  },
  mounted: function () {
    this.get()
  },
  methods: {
    get: function () {
      this.$http.get('/api/article').then(function (res) {
        this.list = res.data.data.list
        // ref  list 引用了ul元素，我想把第一個(gè)li顏色變?yōu)榧t色
        this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
      })
    },
  }
})

我在獲取到數(shù)據(jù)后賦值給數(shù)據(jù)模型中l(wèi)ist屬性，然后我想引用ul元素找到第一個(gè)li把它的顏色變?yōu)榧t色，但是事實(shí)上，這個(gè)要報(bào)錯(cuò)了，在執(zhí)行這句話時(shí)，ul下面并沒有l(wèi)i，也就是說(shuō)剛剛進(jìn)行的賦值操作，當(dāng)前并沒有引起視圖層的更新。

因此，在這樣的情況下，vue給我們提供了$nextTick方法，如果我們想對(duì)未來(lái)更新后的視圖進(jìn)行操作，我們只需要把要執(zhí)行的函數(shù)傳遞給this.$nextTick方法，vue就會(huì)給我們做這個(gè)工作。

源碼解讀

這個(gè)函數(shù)很簡(jiǎn)單，vue2.2.6版本 450行開始。

首先，這個(gè)函數(shù)是采用了一個(gè)單利模式還是什么創(chuàng)建的一個(gè)閉包函數(shù)

var callbacks = [];   // 緩存函數(shù)的數(shù)組
var pending = false;  // 是否正在執(zhí)行
var timerFunc;  // 保存著要執(zhí)行的函數(shù)

首先定義了一些變量供之后使用，下面是一個(gè)函數(shù)

function nextTickHandler () {
  pending = false;
  //  拷貝出函數(shù)數(shù)組副本
  var copies = callbacks.slice(0);
  //  把函數(shù)數(shù)組清空
  callbacks.length = 0;
  // 依次執(zhí)行函數(shù)
  for (var i = 0; i < copies.length; i++) {
    copies[i]();
  }
}

這個(gè)函數(shù)就是$nextTick內(nèi)實(shí)際調(diào)用的函數(shù)。

接下來(lái)，是vue分了三種情況來(lái)延遲調(diào)用以上這個(gè)函數(shù)，因?yàn)?nextTick目的就是把傳進(jìn)來(lái)的函數(shù)延遲到dom更新后再使用，所以這里依次優(yōu)雅降序的使用js的方法來(lái)做到這一點(diǎn)。

1、promise.then延遲調(diào)用

if (typeof Promise !== 'undefined' && isNative(Promise)) {
  var p = Promise.resolve();
  var logError = function (err) { console.error(err); };
  timerFunc = function () {
    p.then(nextTickHandler).catch(logError);
    if (isIOS) { setTimeout(noop); }
  };
}

如果瀏覽器支持Promise，那么就用Promise.then的方式來(lái)延遲函數(shù)調(diào)用，Promise.then方法可以將函數(shù)延遲到當(dāng)前函數(shù)調(diào)用棧最末端，也就是函數(shù)調(diào)用棧最后調(diào)用該函數(shù)。從而做到延遲。

2、MutationObserver 監(jiān)聽變化

else if (typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {

  var counter = 1;
  var observer = new MutationObserver(nextTickHandler);
  var textNode = document.createTextNode(String(counter));
  observer.observe(textNode, {
    characterData: true
  });
  timerFunc = function () {
    counter = (counter + 1) % 2;
    textNode.data = String(counter);
  };
}

MutationObserver是h6新加的一個(gè)功能，其功能是監(jiān)聽dom節(jié)點(diǎn)的變動(dòng)，在所有dom變動(dòng)完成后，執(zhí)行回調(diào)函數(shù)。

具體有一下幾點(diǎn)變動(dòng)的監(jiān)聽

  • childList：子元素的變動(dòng)

  • attributes：屬性的變動(dòng)

  • characterData：節(jié)點(diǎn)內(nèi)容或節(jié)點(diǎn)文本的變動(dòng)

  • subtree：所有下屬節(jié)點(diǎn)（包括子節(jié)點(diǎn)和子節(jié)點(diǎn)的子節(jié)點(diǎn)）的變動(dòng)

可以看出，以上代碼是創(chuàng)建了一個(gè)文本節(jié)點(diǎn)，來(lái)改變文本節(jié)點(diǎn)的內(nèi)容來(lái)觸發(fā)的變動(dòng)，因?yàn)槲覀冊(cè)跀?shù)據(jù)模型更新后，將會(huì)引起dom節(jié)點(diǎn)重新渲染。

所以，我們加了這樣一個(gè)變動(dòng)監(jiān)聽，用一個(gè)文本節(jié)點(diǎn)的變動(dòng)觸發(fā)監(jiān)聽，等所有dom渲染完后，執(zhí)行函數(shù)，達(dá)到我們延遲的效果。

3、setTimeout延遲器

else {
    timerFunc = function () {
      setTimeout(nextTickHandler, 0);
    };
  }

利用setTimeout的延遲原理，setTimeout(func, 0)會(huì)將func函數(shù)延遲到下一次函數(shù)調(diào)用棧的開始，也就是當(dāng)前函數(shù)執(zhí)行完畢后再執(zhí)行該函數(shù)，因此完成了延遲功能。

閉包函數(shù)

return function queueNextTick (cb, ctx) {
    var _resolve;
    callbacks.push(function () {
      if (cb) { cb.call(ctx); }
      if (_resolve) { _resolve(ctx); }
    });
    // 如果沒有函數(shù)隊(duì)列在執(zhí)行才執(zhí)行
    if (!pending) {
      pending = true;
      timerFunc();
    }
    // promise化
    if (!cb && typeof Promise !== 'undefined') {
      console.log('進(jìn)來(lái)了')
      return new Promise(function (resolve) {
        _resolve = resolve;
      })
    }
  }

這個(gè)return的函數(shù)就是我們實(shí)際使用的閉包函數(shù)，每一次添加函數(shù)，都會(huì)想callbacks這個(gè)函數(shù)數(shù)組入棧。然后監(jiān)聽當(dāng)前是否正在執(zhí)行，如果沒有，執(zhí)行函數(shù)。這個(gè)很好理解。下面一個(gè)if是promise化。

this.$nextTick(function () {

})
// promise化
this.$nextTick().then(function () {

}.bind(this))

以上是“為什么要用vue中的nextTick”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：為什么要用vue中的nextTick-創(chuàng)新互聯(lián)
URL分享：http://www.muchs.cn/article40/hgseo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、網(wǎng)站排名、網(wǎng)站設(shè)計(jì)、云服務(wù)器、電子商務(wù)、品牌網(wǎng)站制作

廣告

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

網(wǎng)站托管運(yùn)營(yíng)