Vue.nextTick純干貨使用方法詳解
用過Vue的朋友多多少少都知道$nextTick
~ 在正式講解nextTick之前,我想你應(yīng)該清楚知道 Vue 在更新 DOM 時(shí)是異步
執(zhí)行的,因?yàn)榻酉聛碇v解過程會(huì)結(jié)合組件更新一起講~ 事不宜遲,我們直進(jìn)主題吧(本文以v2.6.14版本的Vue源碼進(jìn)行講解)
一、nextTick小測(cè)試
你真的了解nextTick嗎?來,直接上題~
<template> <div id="app"> <p ref="name">{{ name }}</p> <button @click="handleClick">修改name</button> </div> </template> <script> export default { name: 'App', data () { return { name: '井柏然' } }, mounted() { console.log('mounted', this.$refs.name.innerText) }, methods: { handleClick () { this.$nextTick(() => console.log('nextTick1', this.$refs.name.innerText)) this.name = 'jngboran' console.log('sync log', this.$refs.name.innerText) this.$nextTick(() => console.log('nextTick2', this.$refs.name.innerText)) } } } </script>
請(qǐng)問上述代碼中,當(dāng)點(diǎn)擊按鈕“修改name”時(shí),'nextTick1'
,'sync log'
,'nextTick2'
對(duì)應(yīng)的this.$refs.name.innerText
分別會(huì)輸出什么?注意,這里打印的是DOM的innerText~(文章結(jié)尾處會(huì)貼出答案)
如果此時(shí)的你有非常堅(jiān)定的答案,那你可以不用繼續(xù)往下看了~但如果你對(duì)自己的答案有所顧慮,那不如跟著我,接著往下看。相信你看完,不需要看到答案都能有個(gè)肯定的答案了~!
二、nextTick源碼實(shí)現(xiàn)
源碼位于core/util/next-tick中。可以將其分為4個(gè)部分來看,直接上代碼
1. 全局變量
callbacks
隊(duì)列、pending
狀態(tài)
const callbacks = [] // 存放cb的隊(duì)列 let pending = false // 是否馬上遍歷隊(duì)列,執(zhí)行cb的標(biāo)志
2. flushCallbacks
遍歷callbacks執(zhí)行每個(gè)cb
function flushCallbacks () { pending = false // 注意這里,一旦執(zhí)行,pending馬上被重置為false const copies = callbacks.slice(0) callbacks.length = 0 for (let i = 0; i < copies.length; i++) { copies[i]() // 執(zhí)行每個(gè)cb } }
3. nextTick
的異步實(shí)現(xiàn)
根據(jù)執(zhí)行環(huán)境的支持程度采用不同的異步實(shí)現(xiàn)策略
let timerFunc // nextTick異步實(shí)現(xiàn)fn if (typeof Promise !== 'undefined' && isNative(Promise)) { // Promise方案 const p = Promise.resolve() timerFunc = () => { p.then(flushCallbacks) // 將flushCallbacks包裝進(jìn)Promise.then中 } isUsingMicroTask = true } else if (!isIE && typeof MutationObserver !== 'undefined' && ( isNative(MutationObserver) || MutationObserver.toString() === '[object MutationObserverConstructor]' )) { // MutationObserver方案 let counter = 1 const observer = new MutationObserver(flushCallbacks) // 將flushCallbacks作為觀測(cè)變化的cb const textNode = document.createTextNode(String(counter)) // 創(chuàng)建文本節(jié)點(diǎn) // 觀測(cè)文本節(jié)點(diǎn)變化 observer.observe(textNode, { characterData: true }) // timerFunc改變文本節(jié)點(diǎn)的data,以觸發(fā)觀測(cè)的回調(diào)flushCallbacks timerFunc = () => { counter = (counter + 1) % 2 textNode.data = String(counter) } isUsingMicroTask = true } else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) { // setImmediate方案 timerFunc = () => { setImmediate(flushCallbacks) } } else { // 最終降級(jí)方案setTimeout timerFunc = () => { setTimeout(flushCallbacks, 0) } }
這里用個(gè)真實(shí)案例加深對(duì)MutationObserver
的理解。畢竟比起其他三種異步方案,這個(gè)應(yīng)該是大家最陌生的
const observer = new MutationObserver(() => console.log('觀測(cè)到文本節(jié)點(diǎn)變化')) const textNode = document.createTextNode(String(1)) observer.observe(textNode, { characterData: true }) console.log('script start') setTimeout(() => console.log('timeout1')) textNode.data = String(2) // 這里對(duì)文本節(jié)點(diǎn)進(jìn)行值的修改 console.log('script end')
知道對(duì)應(yīng)的輸出會(huì)是怎么樣的嗎?
script start
、script end
會(huì)在第一輪宏任務(wù)中執(zhí)行,這點(diǎn)沒問題
setTimeout
會(huì)被放入下一輪宏任務(wù)執(zhí)行
MutationObserver
是微任務(wù),所以會(huì)在本輪宏任務(wù)后執(zhí)行,所以先于setTimeout
結(jié)果如下圖:
4. nextTick方法實(shí)現(xiàn)
cb
、Promise
方式
export function nextTick (cb?: Function, ctx?: Object) { let _resolve // 往全局的callbacks隊(duì)列中添加cb callbacks.push(() => { if (cb) { try { cb.call(ctx) } catch (e) { handleError(e, ctx, 'nextTick') } } else if (_resolve) { // 這里是支持Promise的寫法 _resolve(ctx) } }) if (!pending) { pending = true // 執(zhí)行timerFunc,在下一個(gè)Tick中執(zhí)行callbacks中的所有cb timerFunc() } // 對(duì)Promise的實(shí)現(xiàn),這也是我們使用時(shí)可以寫成nextTick.then的原因 if (!cb && typeof Promise !== 'undefined') { return new Promise(resolve => { _resolve = resolve }) } }
- 深入細(xì)節(jié),理解
pending
有什么用,如何運(yùn)作?
- 案例1,同一輪Tick中執(zhí)行2次
$nextTick
,timerFunc
只會(huì)被執(zhí)行一次
this.$nextTick(() => console.log('nextTick1')) this.$nextTick(() => console.log('nextTick2'))
- 用圖看看更直觀?
三、Vue組件的異步更新
這里如果有對(duì)Vue組件化、派發(fā)更新不是十分了解的朋友,可以先戳這里,看圖解Vue響應(yīng)式原理了解下Vue組件化和派發(fā)更新的相關(guān)內(nèi)容再回來看噢~
Vue的異步更新DOM其實(shí)也是使用nextTick
來實(shí)現(xiàn)的,跟我們平時(shí)使用的$nextTick其實(shí)是同一個(gè)~
這里我們回顧一下,當(dāng)我們改變一個(gè)屬性值的時(shí)候會(huì)發(fā)生什么?
根據(jù)上圖派發(fā)更新過程,我們從watcher.update開時(shí)講起,以渲染W(wǎng)atcher為例,進(jìn)入到queueWatcher
里
1. queueWatcher做了什么?
// 用來存放Wathcer的隊(duì)列。注意,不要跟nextTick的callbacks搞混了,都是隊(duì)列,但用處不同~ const queue: Array<Watcher> = [] function queueWatcher (watcher: Watcher) { const id = watcher.id // 拿到Wathcer的id,這個(gè)id每個(gè)watcher都有且全局唯一 if (has[id] == null) { // 避免添加重復(fù)wathcer,這也是異步渲染的優(yōu)化做法 has[id] = true if (!flushing) { queue.push(watcher) } if (!waiting) { waiting = true // 這里把flushSchedulerQueue推進(jìn)nextTick的callbacks隊(duì)列中 nextTick(flushSchedulerQueue) } } }
2. flushSchedulerQueue做了什么?
function flushSchedulerQueue () { currentFlushTimestamp = getNow() flushing = true let watcher, id // 排序保證先父后子執(zhí)行更新,保證userWatcher在渲染W(wǎng)atcher前 queue.sort((a, b) => a.id - b.id) // 遍歷所有的需要派發(fā)更新的Watcher執(zhí)行更新 for (index = 0; index < queue.length; index++) { watcher = queue[index] id = watcher.id has[id] = null // 真正執(zhí)行派發(fā)更新,render -> update -> patch watcher.run() } }
- 最后,一張圖搞懂組件的異步更新過程
四、回歸題目本身
相信經(jīng)過上文對(duì)nextTick源碼的剖析,我們已經(jīng)揭開它神秘的面紗了。這時(shí)的你一定可以堅(jiān)定地把答案說出來了~話不多說,我們一起核實(shí)下,看看是不是如你所想!
如圖所示,mounted
時(shí)候的innerText是“井柏然”的中文
接下來是點(diǎn)擊按鈕后,打印結(jié)果如圖所示
沒錯(cuò),輸出結(jié)果如下(意不意外?驚不驚喜?)
sync log 井柏然
nextTick1 井柏然
nextTick2 jngboran
下面簡(jiǎn)單分析一下每個(gè)輸出:
this.$nextTick(() => console.log('nextTick1', this.$refs.name.innerText)) this.name = 'jngboran' console.log('sync log', this.$refs.name.innerText) this.$nextTick(() => console.log('nextTick2', this.$refs.name.innerText))
sync log
:這個(gè)同步打印沒什么好說了,相信大部分童鞋的疑問點(diǎn)都不在這里。如果不清楚的童鞋可以先回顧一下EventLoop,這里不多贅述了~
nextTick1
:注意其雖然是放在$nextTick
的回調(diào)中,在下一個(gè)tick執(zhí)行,但是他的位置是在this.name = 'jngboran'
的前。也就是說,他的cb會(huì)比App組件的派發(fā)更新(flushSchedulerQueue
)更先進(jìn)入隊(duì)列,當(dāng)nextTick1
打印時(shí),App組件還未派發(fā)更新,所以拿到的還是舊的DOM值。
nextTick2
就不展開了,大家可以自行分析一下。相信大家對(duì)它應(yīng)該是最肯定的,我們平時(shí)不就是這樣拿到更新后的DOM嗎?
最后來一張圖加深理解
寫在最后,nextTick其實(shí)在Vue中也算是比較核心的一個(gè)東西了。因?yàn)樨灤┱麄€(gè)Vue應(yīng)用的組件化、響應(yīng)式的派發(fā)更新與其息息相關(guān)~深入理解nextTick的背后實(shí)現(xiàn)原理,不僅能讓你在面試的時(shí)候一展風(fēng)采,更能讓你在日常開發(fā)工作中,少走彎路少踩坑!
以上就是Vue.nextTick純干貨使用方法詳解的詳細(xì)內(nèi)容,更多關(guān)于Vue.nextTick使用方法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue如何設(shè)置動(dòng)態(tài)的柵格占位、水平偏移量、類名、樣式
這篇文章主要介紹了vue如何設(shè)置動(dòng)態(tài)的柵格占位、水平偏移量、類名、樣式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09Vue3中element-plus全局使用Icon圖標(biāo)的過程詳解
我們?cè)谟胿ue開發(fā)網(wǎng)站的時(shí)候,往往圖標(biāo)是起著很重要的作,這篇文章主要給大家介紹了關(guān)于Vue3中element-plus全局使用Icon圖標(biāo)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息)
這篇文章主要介紹了Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04使用vue init webpack項(xiàng)目名創(chuàng)建項(xiàng)目方式
這篇文章主要介紹了使用vue init webpack項(xiàng)目名創(chuàng)建項(xiàng)目方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11vue 實(shí)現(xiàn)數(shù)字滾動(dòng)增加效果的實(shí)例代碼
最近做了個(gè)項(xiàng)目需要做數(shù)字滾動(dòng)增加的效果,剛開始接到這個(gè)項(xiàng)目還真是懵了,后來發(fā)現(xiàn)實(shí)現(xiàn)代碼很簡(jiǎn)單的,下面小編給大家?guī)砹藇ue 實(shí)現(xiàn)數(shù)字滾動(dòng)增加效果的實(shí)例代碼,需要的朋友參考下吧2018-07-07Vite項(xiàng)目搭建與環(huán)境配置的完整版教程
Vite?使用?Rollup?作為默認(rèn)的構(gòu)建工具,可以將應(yīng)用程序的源代碼打包成一個(gè)或多個(gè)優(yōu)化的靜態(tài)文件,本文就來為大家介紹一下Vite如何進(jìn)行項(xiàng)目搭建與環(huán)境配置吧2023-09-09Vue?Steam同款登錄驗(yàn)證數(shù)字輸入框功能
這篇文章主要介紹了Vue?Steam同款登錄驗(yàn)證數(shù)字輸入框功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03