Vue3組件異步更新和nextTick運(yùn)行機(jī)制源碼解讀
組件的異步更新
我們應(yīng)該都知道或者聽說過組件的更新是異步的,對(duì)于nextTick我們也知道它是利用promise將傳入的回調(diào)函數(shù)放入微任務(wù)隊(duì)列中,在函數(shù)更新完以后執(zhí)行,那么既然都是異步更新,nextTick是怎么保證回調(diào)會(huì)在組件更新后執(zhí)行,其插入隊(duì)列的時(shí)機(jī)又是什么時(shí)候?帶著這些問題我們?nèi)ピ创a中尋找答案。
先回顧一下組件更新的effect:
const effect = (instance.effect = new ReactiveEffect( componentUpdateFn, () => queueJob(update), // updata: () => effect.run() 返回值 componentUpdateFn // 將effect添加到組件的scope.effects中 instance.scope // track it in component's effect scope ))
在響應(yīng)式數(shù)據(jù)發(fā)生改變觸發(fā)effect執(zhí)行的時(shí)候會(huì)執(zhí)行() => queueJob(update)
調(diào)度器,所以我們要去看queueJob干了什么
queueJob
// packages/runtime-core/src/scheduler.ts export function queueJob(job: SchedulerJob) { if ( !queue.length || !queue.includes( // queue中是否已經(jīng)存在相同job job, isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex ) ) { if (job.id == null) { // 向queue添加job queue是一個(gè)數(shù)組 queue.push(job) } else { queue.splice(findInsertionIndex(job.id), 0, job) } // 執(zhí)行queueFlush queueFlush() } }
queueJob主要是將scheduler添加到queue隊(duì)列,然后執(zhí)行queueFlush
queueFlush
function queueFlush() { // isFlushing和isflushPending初始值都是false // 說明當(dāng)前沒有flush任務(wù)在執(zhí)行,也沒有flush任務(wù)在等待執(zhí)行 if (!isFlushing && !isFlushPending) { // 初次執(zhí)行queueFlush將isFlushPending設(shè)置為true 表示有flush任務(wù)在等待執(zhí)行 isFlushPending = true // resolvedPromise是promise.resolve() // flushJobs被放到微任務(wù)隊(duì)列中 等待所有同步scheduler執(zhí)行完畢后執(zhí)行 // 這樣就可以保證flushJobs在一次組件更新中只執(zhí)行一次 // 更新currentFlushPromise 以供nextTick使用 currentFlushPromise = resolvedPromise.then(flushJobs) } }
flushJobs
當(dāng)所有的同步scheduler執(zhí)行完畢后,就會(huì)去處理微任務(wù)隊(duì)列的任務(wù),就會(huì)執(zhí)行flushJobs回調(diào)函數(shù)
function flushJobs(seen?: CountMap) { // 狀態(tài)改為有flush正在執(zhí)行 isFlushPending = false isFlushing = true if (__DEV__) { seen = seen || new Map() } // Sort queue before flush. // This ensures that: // 1. Components are updated from parent to child. (because parent is always // created before the child so its render effect will have smaller // priority number) // 2. If a component is unmounted during a parent component's update, // its update can be skipped. // 組件更新的順序是從父到子 因?yàn)楦附M件總是在子組件之前創(chuàng)建 所以它的渲染效果將具有更小的優(yōu)先級(jí) // 如果一個(gè)組件在父組件更新期間被卸載 則可以跳過它的更新 queue.sort(comparator) ... // 先執(zhí)行queue中的job 然后執(zhí)行pendingPostFlushCbs中的job // 這里可以實(shí)現(xiàn)watch中的 postFlush try { for (flushIndex = 0; flushIndex < queue.length; flushIndex++) { const job = queue[flushIndex] if (job && job.active !== false) { if (__DEV__ && check(job)) { continue } // console.log(`running:`, job.id) // 執(zhí)行job callWithErrorHandling(job, null, ErrorCodes.SCHEDULER) } } } finally { // job執(zhí)行完畢后清空隊(duì)列 flushIndex = 0 queue.length = 0 // 執(zhí)行flushPostFlushCbs 此時(shí)組件已經(jīng)更新完畢 flushPostFlushCbs(seen) isFlushing = false currentFlushPromise = null // some postFlushCb queued jobs! // keep flushing until it drains. if (queue.length || pendingPostFlushCbs.length) { flushJobs(seen) } } }
總結(jié):
組件內(nèi)當(dāng)修改響應(yīng)式數(shù)據(jù)后,組件更新函數(shù)會(huì)被放到queue中,然后注冊(cè)一個(gè)微任務(wù),這個(gè)微任務(wù)負(fù)責(zé)執(zhí)行queue中的所有job,所以這時(shí)就算我們同步修改多次/多個(gè)響應(yīng)式數(shù)據(jù),同一個(gè)組件的更新函數(shù)只會(huì)被放入一次到queue中,等到同步操作結(jié)束后才會(huì)去執(zhí)行注冊(cè)的微任務(wù),組件更新函數(shù)才會(huì)被執(zhí)行,組件才會(huì)被更新。
nextTick
vue3中nextTick的實(shí)現(xiàn)非常簡(jiǎn)單:
export function nextTick<T = void>( this: T, fn?: (this: T) => void ): Promise<void> { const p = currentFlushPromise || resolvedPromise // nextTick回調(diào)函數(shù)放到currentFlushPromise的微任務(wù)隊(duì)列中 return fn ? p.then(this ? fn.bind(this) : fn) : p }
這里的關(guān)鍵就是currentFlushPromise,如果你足夠細(xì)心就會(huì)發(fā)現(xiàn)currentFlushPromise其實(shí)在queueFlush中就被賦值了,它正是把執(zhí)行組件更新函數(shù)的任務(wù)放入微隊(duì)列中的promise,所以在此我們拿到currentFlushPromise正好把nextTick接收到的函數(shù)回調(diào)放到微隊(duì)列中flushJobs的后面,等到flushJobs執(zhí)行完成后組件也已經(jīng)更新完畢,此時(shí)正是我們希望去執(zhí)行nextTick回調(diào)的時(shí)機(jī)?。?/p>
以上就是Vue3組件異步更新和nextTick運(yùn)行機(jī)制源碼解讀的詳細(xì)內(nèi)容,更多關(guān)于Vue3組件異步更新nextTick的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue-cli-service和webpack-dev-server的區(qū)別及說明
這篇文章主要介紹了vue-cli-service和webpack-dev-server的區(qū)別及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10基于vue3+TypeScript實(shí)現(xiàn)一個(gè)簡(jiǎn)易的Calendar組件
最近在學(xué)習(xí) react,在學(xué)習(xí)到使用 react 開發(fā) Calendar 組件的時(shí)候,突然聯(lián)想到使用 vue 進(jìn)行 Calendar 功能的實(shí)現(xiàn),因?yàn)槟壳笆褂玫募夹g(shù)棧是 vue,剛好可以加深下對(duì) vue3 和 ts 的使用印象,所以本文給大家介紹了基于vue3+TypeScript實(shí)現(xiàn)一個(gè)簡(jiǎn)易的Calendar組件2024-05-05vue如何設(shè)置輸入框只能輸入數(shù)字且只能輸入小數(shù)點(diǎn)后兩位,并且不能輸入減號(hào)
這篇文章主要介紹了vue如何設(shè)置輸入框只能輸入數(shù)字且只能輸入小數(shù)點(diǎn)后兩位,并且不能輸入減號(hào)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05vue-router next(false) 禁止訪問某個(gè)頁面時(shí),不保留歷史訪問記錄問題
這篇文章主要介紹了vue-router next(false) 禁止訪問某個(gè)頁面時(shí),不保留歷史訪問記錄問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息)
這篇文章主要介紹了Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04vue3之a(chǎn)xios跨域請(qǐng)求問題及解決
這篇文章主要介紹了vue3之a(chǎn)xios跨域請(qǐng)求問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09vue3如何添加eslint校驗(yàn)(eslint-plugin-vue)
這篇文章主要介紹了vue3如何添加eslint校驗(yàn)(eslint-plugin-vue),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01