vue之nextTick全面解析
簡介
vue是非常流行的框架，他結合了angular和react的優(yōu)點，從而形成了一個輕量級的易上手的具有雙向數據綁定特性的mvvm框架。本人比較喜歡用之。在我們用vue時，我們經常用到一個方法是this.$nextTick，相信你也用過。我常用的場景是在進行獲取數據后，需要對新視圖進行下一步操作或者其他操作時，發(fā)現(xiàn)獲取不到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顏色變?yōu)榧t色
this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
})
},
}
})
我在獲取到數據后賦值給數據模型中l(wèi)ist屬性，然后我想引用ul元素找到第一個li把它的顏色變?yōu)榧t色，但是事實上，這個要報錯了，我們知道，在執(zhí)行這句話時，ul下面并沒有l(wèi)i，也就是說剛剛進行的賦值操作，當前并沒有引起視圖層的更新。因此，在這樣的情況下，vue給我們提供了$nextTick方法，如果我們想對未來更新后的視圖進行操作，我們只需要把要執(zhí)行的函數傳遞給this.$nextTick方法，vue就會給我們做這個工作。
源碼解讀
這個函數很簡單，vue2.2.6版本 450行開始。
首先，這個函數是采用了一個單利模式還是什么創(chuàng)建的一個閉包函數
var callbacks = []; // 緩存函數的數組 var pending = false; // 是否正在執(zhí)行 var timerFunc; // 保存著要執(zhí)行的函數
首先定義了一些變量供之后使用，下面是一個函數
function nextTickHandler () {
pending = false;
// 拷貝出函數數組副本
var copies = callbacks.slice(0);
// 把函數數組清空
callbacks.length = 0;
// 依次執(zhí)行函數
for (var i = 0; i < copies.length; i++) {
copies[i]();
}
}
這個函數就是$nextTick內實際調用的函數。
接下來，是vue分了三種情況來延遲調用以上這個函數，因為$nextTick目的就是把傳進來的函數延遲到dom更新后再使用，所以這里依次優(yōu)雅降序的使用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 監(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是h5新加的一個功能，其功能是監(jiān)聽dom節(jié)點的變動，在所有dom變動完成后，執(zhí)行回調函數。
具體有一下幾點變動的監(jiān)聽
- childList：子元素的變動
- attributes：屬性的變動
- characterData：節(jié)點內容或節(jié)點文本的變動
- subtree：所有下屬節(jié)點（包括子節(jié)點和子節(jié)點的子節(jié)點）的變動
可以看出，以上代碼是創(chuàng)建了一個文本節(jié)點，來改變文本節(jié)點的內容來觸發(fā)的變動，因為我們在數據模型更新后，將會引起dom節(jié)點重新渲染，所以，我們加了這樣一個變動監(jiān)聽，用一個文本節(jié)點的變動觸發(fā)監(jiān)聽，等所有dom渲染完后，執(zhí)行函數，達到我們延遲的效果。
3.setTimeout延遲器
else {
timerFunc = function () {
setTimeout(nextTickHandler, 0);
};
}
利用setTimeout的延遲原理，setTimeout(func, 0)會將func函數延遲到下一次函數調用棧的開始，也就是當前函數執(zhí)行完畢后再執(zhí)行該函數，因此完成了延遲功能。
閉包函數
return function queueNextTick (cb, ctx) {
var _resolve;
callbacks.push(function () {
if (cb) { cb.call(ctx); }
if (_resolve) { _resolve(ctx); }
});
// 如果沒有函數隊列在執(zhí)行才執(zhí)行
if (!pending) {
pending = true;
timerFunc();
}
// promise化
if (!cb && typeof Promise !== 'undefined') {
console.log('進來了')
return new Promise(function (resolve) {
_resolve = resolve;
})
}
}
這個return的函數就是我們實際使用的閉包函數，每一次添加函數，都會想callbacks這個函數數組入棧。然后監(jiān)聽當前是否正在執(zhí)行，如果沒有，執(zhí)行函數。這個很好理解。下面一個if是promise化。
this.$nextTick(function () {
})
// promise化
this.$nextTick().then(function () {
}.bind(this))
以上代碼中第二種寫法我們不常見把，直接調用$nextTick函數然后用promise格式去書寫代碼，不過這個then里面需要手動綁定this，vue內部沒有給做處理。
結尾
這就是一個this.$nextTick的實現(xiàn)，其中利用了優(yōu)雅降序的巧妙手法，使代碼盡可能優(yōu)化。而且還提供了promise的寫法，雖然我們不經常用，但是有總比沒有好。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本篇文章主要介紹了探索Vue高階組件的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Vue?Loader?作為一個?webpack?的?Loader,扮演著將?.vue?文件轉化為瀏覽器可執(zhí)行代碼的角色,下面就跟隨小編一起深入了解Vue?Loader?的技術細節(jié)與工作機制吧2024-12-12
vue router嵌套路由在history模式下刷新無法渲染頁面問題的解決方法
這篇文章主要介紹了vue router嵌套路由在history模式下刷新無法渲染頁面問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
本文主要介紹了vue項目中使用require.context引入組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了Vue中引入樣式文件的方法,需要的朋友可以參考下2017-08-08
vue+elementUI用戶修改密碼的前端驗證規(guī)則
用戶登錄后修改密碼,密碼需要一定的驗證規(guī)則,這篇文章主要介紹了vue+elementUI用戶修改密碼的前端驗證,需要的朋友可以參考下2024-03-03
這篇文章主要給大家介紹一下vue實現(xiàn)在頁面上添加水印的實例,文中有詳細的代碼示例供大家參考,具有一定的參考價值,感興趣的小伙伴跟著小編一起來看看吧2023-12-12
這篇文章主要介紹了vue.js 實現(xiàn)評價五角星組件的實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
Vue.js實現(xiàn)開發(fā)購物車功能的方法詳解
這篇文章主要介紹了Vue.js實現(xiàn)開發(fā)購物車功能的方法,結合實例形式分析了基于vue.js開發(fā)的購物車功能相關操作步驟與實現(xiàn)技巧,需要的朋友可以參考下2019-02-02
vue2.0 computed 計算list循環(huán)后累加值的實例
下面小編就為大家分享一篇vue2.0 computed 計算list循環(huán)后累加值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03