下面Vue.js教學專欄跟大家介紹一下vue中的nextTick。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
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方法可以將函數延遲到目前函數呼叫堆疊最末端，也就是函數呼叫堆疊最後一個呼叫函數。從而做到延遲。
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內部沒有給做處理。
相關推薦：
#
更多程式設計相關知識，請造訪：程式設計課程！ ！
以上是全面解析vue中的nextTick的詳細內容。更多資訊請關注PHP中文網其他相關文章！
