vue之nextTick全面解析

vue的第一篇文章,介紹一下簡單的nextTick方法的實現原理vue

簡介

vue是很是流行的框架,他結合了angular和react的優勢,從而造成了一個輕量級的易上手的具備雙向數據綁定特性的mvvm框架。本人比較喜歡用之。在咱們用vue時,咱們常常用到一個方法是this.$nextTick,相信你也用過。我經常使用的場景是在進行獲取數據後,須要對新視圖進行下一步操做或者其餘操做時,發現獲取不到dom。由於賦值操做只完成了數據模型的改變並無完成視圖更新。在這個時候咱們須要用到本章介紹的函數。react

爲何要用nextTick

請看以下一段代碼api

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行開始。promise

首先,這個函數是採用了一個單利模式仍是什麼建立的一個閉包函數瀏覽器

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的方法來作到這一點。app

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是h5新加的一個功能,其功能是監聽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))

以上代碼中第二種寫法咱們不常見把,直接調用$nextTick函數而後用promise格式去書寫代碼,不過這個then裏面須要手動綁定this,vue內部沒有給作處理。

結尾

這就是一個this.$nextTick的實現,其中利用了優雅降序的巧妙手法,使代碼儘量優化。並且還提供了promise的寫法,雖然咱們不常常用,可是有總比沒有好。

相關文章
相關標籤/搜索