我們應該都知道或聽過元件的更新是異步的，對於nextTick我們也知道它是利用promise將傳入的回呼函數放入微任務佇列中，在函數更新完以後執行，那麼既然都是非同步更新，nextTick是怎麼保證回呼會在元件更新後執行，其插入佇列的時機又是什麼時候？帶著這些問題我們去原始碼中尋找答案。
先回顧一下元件更新的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 ))
在響應式資料發生改變觸發effect執行的時候會執行() => queueJob(update)調度器，所以我們要去看queueJob幹了什麼
// packages/runtime-core/src/scheduler.ts
export function queueJob(job: SchedulerJob) {
if (
!queue.length ||
!queue.includes( // queue中是否已经存在相同job
job,
isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex
)
) {
if (job.id == null) {
// 向queue添加job queue是一个数组
queue.push(job)
} else {
queue.splice(findInsertionIndex(job.id), 0, job)
}
// 执行queueFlush
queueFlush()
}
}queueJob主要是將scheduler加入到queue佇列，然後執行queueFlush
function queueFlush() {
// isFlushing和isflushPending初始值都是false
// 说明当前没有flush任务在执行，也没有flush任务在等待执行
if (!isFlushing && !isFlushPending) {
// 初次执行queueFlush将isFlushPending设置为true 表示有flush任务在等待执行
isFlushPending = true
// resolvedPromise是promise.resolve()
// flushJobs被放到微任务队列中 等待所有同步scheduler执行完毕后执行
// 这样就可以保证flushJobs在一次组件更新中只执行一次
// 更新currentFlushPromise 以供nextTick使用
currentFlushPromise = resolvedPromise.then(flushJobs)
}
}當所有的同步scheduler執行完畢後，就會去處理微任務佇列的任務，就會執行flushJobs回呼函數
function flushJobs(seen?: CountMap) {
// 状态改为有flush正在执行
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.
// 组件更新的顺序是从父到子 因为父组件总是在子组件之前创建 所以它的渲染效果将具有更小的优先级
// 如果一个组件在父组件更新期间被卸载 则可以跳过它的更新
queue.sort(comparator)
...
// 先执行queue中的job 然后执行pendingPostFlushCbs中的job
// 这里可以实现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)
// 执行job
callWithErrorHandling(job, null, ErrorCodes.SCHEDULER)
}
}
} finally {
// job执行完毕后清空队列
flushIndex = 0
queue.length = 0
// 执行flushPostFlushCbs 此时组件已经更新完毕
flushPostFlushCbs(seen)
isFlushing = false
currentFlushPromise = null
// some postFlushCb queued jobs!
// keep flushing until it drains.
if (queue.length || pendingPostFlushCbs.length) {
flushJobs(seen)
}
}
}#元件內當修改響應式資料後，元件更新函數會被放到queue中，然後註冊一個微任務，這個微任務負責執行queue中的所有job，所以這時就算我們同步修改多次/多個響應式數據，同一個元件的更新函數只會被放入一次到queue中，等到同步操作結束後才會去執行註冊的微任務，元件更新函數才會被執行，元件才會被更新。
vue3中nextTick的實作非常簡單：
export function nextTick<T = void>(
this: T,
fn?: (this: T) => void
): Promise<void> {
const p = currentFlushPromise || resolvedPromise
// nextTick回调函数放到currentFlushPromise的微任务队列中
return fn ? p.then(this ? fn.bind(this) : fn) : p
}這裡的關鍵就是currentFlushPromise，如果你夠細心就會發現currentFlushPromise其實在queueFlush中就被賦值了，它正是把執行元件更新函數的任務放入微隊列中的promise，所以在此我們拿到currentFlushPromise正好把nextTick接收到的函數回調放到微隊列中flushJobs的後面，等到flushJobs執行完成後元件也已經更新完畢，此時正是我們希望去執行nextTick回調的時機！
以上是Vue3元件非同步更新與nextTick運行機制原始碼分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
