簡介

vue是非常流行的框架，他結合了angular和react的優點，從而形成了一個輕量級的易上手的具有雙向數據綁定特性的mvvm框架。本人比較喜歡用之。在我們用vue時，我們經常用到一個方法是this.$nextTick，相信你也用過。我常用的場景是在進行獲取數據后，需要對新視圖進行下一步操作或者其他操作時，發現獲取不到dom。因為賦值操作只完成了數據模型的改變并沒有完成視圖更新。在這個時候我們需要用到本章介紹的函數。

為什么要用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方法可以將函數延遲到當前函數調用棧最末端，也就是函數調用棧最后調用該函數。從而做到延遲。