Vue中nextTick函數原始碼詳解
本文主要介紹了Vue中之nextTick函數原始碼分析,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
1. 什麼是Vue.nextTick()？
官方文件解釋如下：
下次DOM更新循環結束後執行的延遲回呼。在修改資料之後立即使用這個方法，取得更新後的DOM。
2. 為什麼要使用nextTick?
<!DOCTYPE html>
<html>
<head>
<title>演示Vue</title>
<script src="https://tugenhua0707.github.io/vue/vue1/vue.js"></script>
</head>
<body>
<p id="app">
<template>
<p ref="list">
{{name}}
</p>
</template>
</p>
<script>
new Vue({
el: '#app',
data: {
name: 'aa'
},
mounted() {
this.updateData();
},
methods: {
updateData() {
var self = this;
this.name = 'bb';
console.log(this.$el.textContent); // aa
this.$nextTick(function(){
console.log(self.$el.textContent); // bb
});
}
}
});
</script>
</body>
</html>如上程式碼在頁面檢視上顯示bb，但是當我在控制台列印的時候，取得的文字內容還是aa，但是使用nextTick後，取得的文字內容就是最新的內容bb了，因此在這種情況下，我們可以使用nextTick函數了。
上面的程式碼為什麼要改變this.name = 'bb';後，再使用console.log(this.$el.textContent);列印的值還是aa呢？那是因為設定name的值後，DOM還沒更新到，所以取得值還是之前的值，但是我們放到nextTick函數裡面的時候，程式碼會在DOM更新後執行，因此DOM更新後，再去取得元素的值就可以取得到最新值了。
瞭解DOM更新：在VUE中，當我們修改了data中的某一個值後，並不會立即反應到該el中，vue將對更改的資料放到watcher的一個非同步佇列中，只有在目前任務空閒時才會執行watcher佇列任務，這就有一個延遲時間，因此放到nextTick函數後就可以取得該el的最新值了。如果我們把上面的nextTick改成setTimeout也是可以的。
3. Vue原始碼詳解之nextTick（原始碼在vue/src/core/util/env.js）
在理解nextTick原始碼之前，我們先來理解下html5新增的MutationObserver的API，它的作用是用來監聽DOM變動的接口，它能監聽一個dom物件發生的子節點刪除，屬性修改，文字內容修改等等。
nextTick原始碼如下：
export const nextTick = (function () {
const callbacks = []
let pending = false
let timerFunc
function nextTickHandler () {
pending = false;
/*
之所以要slice复制一份出来是因为有的cb执行过程中又会往callbacks中加入内容，比如$nextTick的回调函数里又有$nextTick，
那么这些应该放入到下一个轮次的nextTick去执行，所以拷贝一份，遍历完成即可，防止一直循环下去。
*/
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}
// the nextTick behavior leverages the microtask queue, which can be accessed
// via either native Promise.then or MutationObserver.
// MutationObserver has wider support, however it is seriously bugged in
// UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
// completely stops working after triggering a few times... so, if native
// Promise is available, we will use it:
/* istanbul ignore if */
/*
nextTick行为利用了microtask队列, 先使用 Promise.resolve().then(nextTickHandler)来将异步回调
放入到microtask中，Promise 和 MutationObserver都可以使用，但是 MutationObserver 在IOS9.3以上的
WebView中有bug，因此如果满足第一项的话就可以执行，如果没有原生Promise就用 MutationObserver。
*/
if (typeof Promise !== 'undefined' && isNative(Promise)) {
var p = Promise.resolve()
var logError = err => { console.error(err) }
timerFunc = () => {
p.then(nextTickHandler).catch(logError)
// in problematic UIWebViews, Promise.then doesn't completely break, but
// it can get stuck in a weird state where callbacks are pushed into the
// microtask queue but the queue isn't being flushed, until the browser
// needs to do some other work, e.g. handle a timer. Therefore we can
// "force" the microtask queue to be flushed by adding an empty timer.
if (isIOS) setTimeout(noop)
}
} else if (typeof MutationObserver !== 'undefined' && (
isNative(MutationObserver) ||
// PhantomJS and iOS 7.x
MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
// use MutationObserver where native Promise is not available,
// e.g. PhantomJS IE11, iOS7, Android 4.4
/*
创建一个MutationObserver，observe监听到DOM改动之后执行的回调 nextTickHandler
*/
var counter = 1
var observer = new MutationObserver(nextTickHandler)
var textNode = document.createTextNode(String(counter));
// 使用MutationObserver的接口，监听文本节点的字符内容
observer.observe(textNode, {
characterData: true
});
/*
每次执行timerFunc函数都会让文本节点的内容在0/1之间切换，切换之后将新赋值到那个我们MutationObserver监听的文本节点上去。
*/
timerFunc = () => {
counter = (counter + 1) % 2
textNode.data = String(counter)
}
} else {
// fallback to setTimeout
/*
如果上面的两种都不支持的话，我们就使用setTimeout来执行
*/
timerFunc = () => {
setTimeout(nextTickHandler, 0)
}
}
return function queueNextTick (cb?: Function, ctx?: Object) {
let _resolve
callbacks.push(() => {
if (cb) {
try {
cb.call(ctx)
} catch (e) {
handleError(e, ctx, 'nextTick')
}
} else if (_resolve) {
_resolve(ctx)
}
});
/* 如果pending为true，表明本轮事件循环中已经执行过 timerFunc(nextTickHandler, 0) */
if (!pending) {
pending = true
timerFunc()
}
if (!cb && typeof Promise !== 'undefined') {
return new Promise((resolve, reject) => {
_resolve = resolve
})
}
}
})()整體思路理解：首先nextTick 是一個閉包函數，程式碼立即執行，在理解整體程式碼之前，我們先來看個類似的demo，如下程式碼：
<!DOCTYPE html>
<html>
<head>
<title>演示Vue</title>
</head>
<body>
<p id="app">
</p>
<script>
var nextTick = (function(){
return function queueNextTick(cb, ctx) {
if (cb) {
try {
cb.call(ctx)
} catch (e) {
console.log('出错了');
}
}
}
})();
// 方法调用
nextTick(function(){
console.log(2); // 打印2
})
</script>
</body>
</html>demo程式碼和上面的程式碼很類似。
我們也可以再來抽離使用nextTick做demo程式碼如下：
var nextTick2 = (function(){
const callbacks = [];
let pending = false;
let timerFunc;
function nextTickHandler () {
pending = false
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}
if (typeof Promise !== 'undefined') {
var p = Promise.resolve()
var logError = err => { console.error(err) }
timerFunc = () => {
p.then(nextTickHandler).catch(logError)
}
} else if (typeof MutationObserver !== 'undefined' ||
// PhantomJS and iOS 7.x
MutationObserver.toString() === '[object MutationObserverConstructor]'
) {
// use MutationObserver where native Promise is not available,
// e.g. PhantomJS IE11, iOS7, Android 4.4
var counter = 1
var observer = new MutationObserver(nextTickHandler)
var textNode = document.createTextNode(String(counter))
observer.observe(textNode, {
characterData: true
})
timerFunc = () => {
counter = (counter + 1) % 2
textNode.data = String(counter)
}
} else {
// fallback to setTimeout
/* istanbul ignore next */
timerFunc = () => {
setTimeout(nextTickHandler, 0)
}
}
return function queueNextTick (cb, ctx) {
let _resolve
callbacks.push(() => {
if (cb) {
try {
cb.call(ctx)
} catch (e) {
handleError(e, ctx, 'nextTick')
}
} else if (_resolve) {
_resolve(ctx)
}
})
if (!pending) {
pending = true
timerFunc()
}
if (!cb && typeof Promise !== 'undefined') {
return new Promise((resolve, reject) => {
_resolve = resolve
})
}
}
})();
nextTick2(function(){
console.log(2222);
});如上程式碼是nextTick原始碼的抽離，為了更好的理解nextTick，做瞭如上的demo。
我們再來理解一下整體的程式碼的意義；
先定義數組callbacks = [];來存放所有需要執行的回呼函數，定義let pending = false ；判斷本輪事件是否執行過timerFunc(nextTickHandler, 0)這個函數，為true說明執行過timeFunc函數，接著定義nextTickHandler函數，該函數的作用是依序遍歷數組callbacks保存的函數，依序執行；
#請看原始程式碼如下：
function nextTickHandler () {
pending = false
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}然後就是三個判斷了，程式碼如下：
##
if (typeof Promise !== 'undefined' && isNative(Promise)) {
var p = Promise.resolve();
var logError = err => { console.error(err) }
timerFunc = () => {
p.then(nextTickHandler).catch(logError);
} else if (typeof MutationObserver !== 'undefined' && (
isNative(MutationObserver) ||
// PhantomJS and iOS 7.x
MutationObserver.toString() === '[object MutationObserverConstructor]'
)){
var counter = 1
var observer = new MutationObserver(nextTickHandler)
var textNode = document.createTextNode(String(counter))
observer.observe(textNode, {
characterData: true
})
timerFunc = () => {
counter = (counter + 1) % 2
textNode.data = String(counter)
}
} else {
timerFunc = () => {
setTimeout(nextTickHandler, 0)
}
}return function queueNextTick (cb?: Function, ctx?: Object) {
let _resolve
callbacks.push(() => {
if (cb) {
try {
cb.call(ctx)
} catch (e) {
handleError(e, ctx, 'nextTick')
}
} else if (_resolve) {
_resolve(ctx)
}
})
if (!pending) {
pending = true
timerFunc()
}
if (!cb && typeof Promise !== 'undefined') {
return new Promise((resolve, reject) => {
_resolve = resolve
})
}
}Node.js中的process .nextTick使用實例
node.js中的定時器nextTick()和setImmediate()區別分析_node.js
以上是Vue中nextTick函數原始碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
golang函數動態建立新函數的技巧
Apr 25, 2024 pm 02:39 PM
Go語言提供了兩種動態函數創建技術：closures和反射。 closures允許存取閉包作用域內的變量，而反射可使用FuncOf函數建立新函數。這些技術在自訂HTTP路由器、實現高度可自訂的系統和建置可插拔的元件方面非常有用。
C++ 函數命名中參數順序的考慮
Apr 24, 2024 pm 04:21 PM
在C++函數命名中，考慮參數順序至關重要，可提高可讀性、減少錯誤並促進重構。常見的參數順序約定包括：動作-物件、物件-動作、語意意義和遵循標準函式庫。最佳順序取決於函數目的、參數類型、潛在混淆和語言慣例。
excel函數公式大全
May 07, 2024 pm 12:04 PM
1. SUM函數，用於對一列或一組單元格中的數字進行求和，例如：=SUM(A1:J10)。 2、AVERAGE函數，用於計算一列或一組儲存格中的數字的平均值，例如：=AVERAGE(A1:A10)。 3.COUNT函數，用於計算一列或一組單元格中的數字或文字的數量，例如：=COUNT(A1:A10)4、IF函數，用於根據指定的條件進行邏輯判斷，並返回相應的結果。
C++ 函式預設參數與可變參數的優缺點比較
Apr 21, 2024 am 10:21 AM
C++函數中預設參數的優點包括簡化呼叫、增強可讀性、避免錯誤。缺點是限制靈活性、命名限制。可變參數的優點包括無限彈性、動態綁定。缺點包括複雜性更高、隱式型別轉換、除錯困難。
C++ 函式回傳參考型別有什麼好處？
Apr 20, 2024 pm 09:12 PM
C++中的函數傳回參考類型的好處包括：效能提升：引用傳遞避免了物件複製，從而節省了記憶體和時間。直接修改：呼叫方可以直接修改傳回的參考對象，而無需重新賦值。程式碼簡潔：引用傳遞簡化了程式碼，無需額外的賦值操作。
自訂 PHP 函數和預定義函數之間有什麼區別？
Apr 22, 2024 pm 02:21 PM
自訂PHP函數與預定義函數的差異在於：作用域：自訂函數僅限於其定義範圍，而預定義函數可在整個腳本中存取。定義方式：自訂函數使用function關鍵字定義，而預先定義函數則由PHP核心定義。參數傳遞：自訂函數接收參數，而預先定義函數可能不需要參數。擴充性：自訂函數可以根據需要創建，而預定義函數是內建的且無法修改。
C++ 函式異常進階：客製化錯誤處理
May 01, 2024 pm 06:39 PM
C++中的異常處理可透過自訂異常類別增強，提供特定錯誤訊息、上下文資訊以及根據錯誤類型執行自訂操作。定義繼承自std::exception的異常類，提供特定的錯誤訊息。使用throw關鍵字拋出自訂異常。在try-catch區塊中使用dynamic_cast將捕獲到的異常轉換為自訂異常類型。在實戰案例中，open_file函數會拋出FileNotFoundException異常，捕捉並處理該異常可提供更具體的錯誤訊息。
