為什么要用vue中的nextTick

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

為什么要用nextTick

請看如下一段代碼

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元素，我想把第一個li顏色變為紅色
        this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
      })
    },
  }
})

我在獲取到數據后賦值給數據模型中list屬性，然后我想引用ul元素找到第一個li把它的顏色變為紅色，但是事實上，這個要報錯了，在執行這句話時，ul下面并沒有li，也就是說剛剛進行的賦值操作，當前并沒有引起視圖層的更新。

因此，在這樣的情況下，vue給我們提供了$nextTick方法，如果我們想對未來更新后的視圖進行操作，我們只需要把要執行的函數傳遞給this.$nextTick方法，vue就會給我們做這個工作。

源碼解讀

這個函數很簡單，vue2.2.6版本 450行開始。

首先，這個函數是采用了一個單利模式還是什么創建的一個閉包函數

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

首先定義了一些變量供之后使用，下面是一個函數

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

這個函數就是$nextTick內實際調用的函數。

接下來，是vue分了三種情況來延遲調用以上這個函數，因為$nextTick目的就是把傳進來的函數延遲到dom更新后再使用，所以這里依次優雅降序的使用js的方法來做到這一點。

1、promise.then延遲調用

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的方式來延遲函數調用，Promise.then方法可以將函數延遲到當前函數調用棧最末端，也就是函數調用棧最后調用該函數。從而做到延遲。

2、MutationObserver 監聽變化

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新加的一個功能，其功能是監聽dom節點的變動，在所有dom變動完成后，執行回調函數。

具體有一下幾點變動的監聽

• childList：子元素的變動

• attributes：屬性的變動

• characterData：節點內容或節點文本的變動

• subtree：所有下屬節點（包括子節點和子節點的子節點）的變動

可以看出，以上代碼是創建了一個文本節點，來改變文本節點的內容來觸發的變動，因為我們在數據模型更新后，將會引起dom節點重新渲染。

所以，我們加了這樣一個變動監聽，用一個文本節點的變動觸發監聽，等所有dom渲染完后，執行函數，達到我們延遲的效果。

3、setTimeout延遲器

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

利用setTimeout的延遲原理，setTimeout(func, 0)會將func函數延遲到下一次函數調用棧的開始，也就是當前函數執行完畢后再執行該函數，因此完成了延遲功能。

閉包函數

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

這個return的函數就是我們實際使用的閉包函數，每一次添加函數，都會想callbacks這個函數數組入棧。然后監聽當前是否正在執行，如果沒有，執行函數。這個很好理解。下面一個if是promise化。

this.$nextTick(function () {

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

}.bind(this))

以上是“為什么要用vue中的nextTick”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！