前言
tips:第一次發(fā)技術(shù)文章，篇幅比較簡(jiǎn)短，主要采取文字和關(guān)鍵代碼表現(xiàn)的形式，希望幫助到大家。(若有不正確還請(qǐng)多多指正)
nextTick作用和用法
用法：nextTick接收一個(gè)回調(diào)函數(shù)作為參數(shù)，它的作用是將回調(diào)延遲到下一次DOM更新之后執(zhí)行，如果沒有提供回調(diào)函數(shù)參數(shù)且在支持Promise的環(huán)境中，nextTick將返回一個(gè)Promise。
適用場(chǎng)景：開發(fā)過程中，開發(fā)者需要在更新完數(shù)據(jù)之后，需要對(duì)新DOM做一些操作，其實(shí)我們當(dāng)時(shí)無法對(duì)新DOM進(jìn)行操作，因?yàn)檫@時(shí)候還沒有重新渲染，這時(shí)候nextTick就派上了用場(chǎng)。
nextTick實(shí)現(xiàn)原理
下面我們介紹下nextTick工作原理：
首先我們應(yīng)該了解到更新完數(shù)據(jù)（狀態(tài)）之后，DOM更新這個(gè)動(dòng)作并不是同步進(jìn)行的，而是異步的。Vue.js中有一個(gè)隊(duì)列，每當(dāng)需要渲染時(shí)，會(huì)將Watcher推送到這個(gè)隊(duì)列中，等下一次事件循環(huán)中再讓W(xué)atcher觸發(fā)渲染流程。這里我們可能會(huì)有兩個(gè)疑問：
**1.為什么更新DOM是異步的？**
我們知道從Vue2.0開始使用虛擬DOM進(jìn)行渲染，變化偵測(cè)只發(fā)送到組件級(jí)別，組件內(nèi)部則通過虛擬DOM的diff（比對(duì)）而進(jìn)行局部渲染，而在同一次事件循環(huán)中組件假如收到兩份通知，組件是否會(huì)進(jìn)行兩次渲染呢？事實(shí)上一次事件循環(huán)組件會(huì)在所有狀態(tài)修改完畢之后只進(jìn)行一次渲染操作。
**2.什么是事件循環(huán)？**
javascript是單線程腳本語言，它具有非阻塞特性，之所以非阻塞是由于在處理異步代碼時(shí)，主線程會(huì)掛起這個(gè)任務(wù)，當(dāng)異步任務(wù)處理完畢之后會(huì)根據(jù)一定的規(guī)則去執(zhí)行異步任務(wù)的回調(diào)，異步任務(wù)分宏任務(wù)(macrotast)和微任務(wù)(microtast)，它們會(huì)被分配到不同的隊(duì)列中，當(dāng)執(zhí)行棧所有任務(wù)執(zhí)行完畢之后，會(huì)先檢查微任務(wù)隊(duì)列中是否有事件存在，優(yōu)先執(zhí)行微任務(wù)隊(duì)列事件對(duì)應(yīng)的回調(diào)，直至為空。然后再執(zhí)行宏任務(wù)隊(duì)列中事件的回調(diào)。無限重復(fù)這個(gè)過程，形成一個(gè)無限循環(huán)就叫做事件循環(huán)。
常見微任務(wù)包括：Promise 、MutationObserver、Object.observer、process.nextTick等
常見宏任務(wù)包括：setTimeout、setInterval、setImmediate、MessageChannel、requestAnimation、UI交互事件等
微任務(wù)如何注冊(cè)?
nextTick會(huì)將回調(diào)添加到異步任務(wù)隊(duì)列中延遲執(zhí)行，在執(zhí)行回調(diào)前，反復(fù)調(diào)用nextTick，Vue并不會(huì)反復(fù)添加到任務(wù)隊(duì)列中，只會(huì)向任務(wù)隊(duì)列添加一個(gè)任務(wù)，多次使用nextTick只會(huì)將回調(diào)添加到回調(diào)列表緩存起來，當(dāng)任務(wù)觸發(fā)時(shí)，會(huì)清空回調(diào)列表并依次執(zhí)行所有回調(diào) ，具體代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
const callbacks = []let pending = falsefunction flushCallbacks(){ //執(zhí)行回調(diào) pending = false const copies = callbacks.slice(0) callbacks.length = 0 //清空回調(diào)隊(duì)列 for(let i = 0; i < copies.length; i++) { copies[i]() }}let microTimerFuncconst p = Promise.resolve()microTimerFunc = () => { //注冊(cè)微任務(wù) p.then(flushCallbacks)}export function nextTick(cb,ctx){ callbacks.push(()=>{ if(cb){ cb.call(ctx) } }) if(!pending){ pending = true //將pending設(shè)置為true，保證任務(wù)在依次事件循環(huán)中不會(huì)重復(fù)添加 microTimerFunc() }} |
由于微任務(wù)優(yōu)先級(jí)太高，可能在某些場(chǎng)景下需要使用到宏任務(wù)，所以Vue提供了可以強(qiáng)制使用宏任務(wù)的方法withMacroTask。具體實(shí)現(xiàn)如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
const callbacks = []let pending = falsefunction flushCallbacks(){ //執(zhí)行回調(diào) pending = false const copies = callbacks.slice(0) callbacks.length = 0 //清空回調(diào)隊(duì)列 for(let i = 0; i < copies.length; i++) { copies[i]() }}let microTimerFunc//新增代碼let macroTimerFunc = function(){ ...}let useMacroTask = falseconst p = Promise.resolve()microTimerFunc = () => { //注冊(cè)微任務(wù) p.then(flushCallbacks)}//新增代碼export function withMacroTask(fn){ return fn._withTask || fn._withTask = function()=>{ useMacroTask = true const res = fn.apply(null,arguments) useMacroTask = false return res }}export function nextTick(cb,ctx){ callbacks.push(()=>{ if(cb){ cb.call(ctx) } }) if(!pending){ pending = true //將pending設(shè)置為true，保證任務(wù)在依次事件循環(huán)中不會(huì)重復(fù)添加 //修改代碼 if(useMacroTask){ macroTimerFunc() }else{ microTimerFunc() } }} |
上面提供了一個(gè)withMacroTask方法強(qiáng)制使用宏任務(wù)，通過useMacroTask變量進(jìn)行控制是否使用注冊(cè)宏任務(wù)執(zhí)行，withMacroTask實(shí)現(xiàn)很簡(jiǎn)單，先將useMacroTask變量設(shè)置為true，然后執(zhí)行回調(diào)，回調(diào)執(zhí)行之后再改回false。
宏任務(wù)是如何注冊(cè)？
注冊(cè)宏任務(wù)優(yōu)先使用setImmediate，但是存在兼容性問題，只能在IE中使用，所以使用MessageChannel作為備選方案，若以上都不支持則最后會(huì)使用setTimeout。具體實(shí)現(xiàn)如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
if(typeof setImmediate !== 'undefined' && isNative(setImmediate)){ macroTimerFunc = ()=>{ setImmediate(flushCallbacks) }} else if( typeof MessageChannel !== 'undefined' && (isNative(MessageChannel) || MessageChannel.toString() === '[Object MessageChannelConstructor]')){ const channel = new MessageChannel() const port = channel.port2 channel.port1.onmessage = flushCallbacks macroTimerFunc = ()=>{ port.postMessage(1) }} else { macroTimerFunc = ()=>{ setTimout(flushCallbacks,0) }} |
microTimerFunc的實(shí)現(xiàn)方法是通過Promise.then，但是并不是所有瀏覽器都支持Promise，當(dāng)不支持的時(shí)候采取降級(jí)為宏任務(wù)方式
|
1
2
3
4
5
6
7
8
|
if(typeof Promise !== 'undefined' && isNative(Promise)){ const p = Promise.resolve() microTimerFunc = ()=>{ p.then(flushCallbacks) }} else { microTimerFunc = macroTimerFunc} |
若未提供回調(diào)且環(huán)境支持Promise情況下，nextTick會(huì)返回一個(gè)Promise，具體實(shí)現(xiàn)如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
export function nextTick(cb, ctx) { let _resolve callbacks.push(()=>{ if(cb){ cb.call(ctx) }else{ _resolve(ctx) } }) if(!pending){ pending = true if(useMacroTask){ macroTimerFunc() }else{ microTimerFunc() } } if(typeof Promise !== 'undefined' && isNative(Promise)){ return new Promise(resolve=>{ _resolve = resolve }) }} |
以上是nextTick運(yùn)行原理的設(shè)計(jì)，完整代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
const callbacks = []let pending = falsefunction flushCallbacks(){ //執(zhí)行回調(diào) pending = false const copies = callbacks.slice(0) callbacks.length = 0 //清空回調(diào)隊(duì)列 for(let i = 0; i < copies.length; i++) { copies[i]() }}let microTimerFunclet macroTimerFunc let useMacroTask = false//注冊(cè)宏任務(wù)if(typeof setImmediate !== 'undefined' && isNative(setImmediate)){ macroTimerFunc = ()=>{ setImmediate(flushCallbacks) }} else if( typeof MessageChannel !== 'undefined' && (isNative(MessageChannel) || MessageChannel.toString() === '[Object MessageChannelConstructor]')){ const channel = new MessageChannel() const port = channel.port2 channel.port1.onmessage = flushCallbacks macroTimerFunc = ()=>{ port.postMessage(1) }} else { macroTimerFunc = ()=>{ setTimout(flushCallbacks,0) }}//微任務(wù)注冊(cè)if(typeof Promise !== 'undefined' && isNative(Promise)){ const p = Promise.resolve() microTimerFunc = ()=>{ p.then(flushCallbacks) }} else {//降級(jí)處理 microTimerFunc = macroTimerFunc}export function withMacroTask(fn){ return fn._withTask || fn._withTask = function()=>{ useMacroTask = true const res = fn.apply(null,arguments) useMacroTask = false return res }}export function nextTick(cb,ctx){ let _resolve callbacks.push(()=>{ if(cb){ cb.call(ctx) }else{ _resolve(ctx) } }) if(!pending){ pending = true //將pending設(shè)置為true，保證任務(wù)在依次事件循環(huán)中不會(huì)重復(fù)添加 //修改代碼 if(useMacroTask){ macroTimerFunc() }else{ microTimerFunc() } } if(typeof Promise !== 'undefined' && isNative(Promise)){ return new Promise(resolve=>{ _resolve = resolve }) }} |
以上便是對(duì)nextTick的實(shí)現(xiàn)原理的全部介紹。
參考資料
Vue.js深入淺出
總結(jié)
到此這篇關(guān)于Vue.js原理分析之nextTick實(shí)現(xiàn)詳解的文章就介紹到這了,更多相關(guān)Vue.js原理之nextTick實(shí)現(xiàn)內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://juejin.im/post/6869220072074936334
