コンポーネントの更新が非同期であることは誰もが知っているか聞いたことがあるはずです。nextTick については、promise を使用して受信コールバック関数をマイクロタスク キューに入れることもわかっています。では、これらはすべて非同期更新であるため、nextTick はコンポーネントの更新後にコールバックが実行されることをどのように保証し、キューに挿入するタイミングはいつなのでしょうか?これらの質問に対して、ソース コードを調べて答えを見つけます。
まずコンポーネントの更新の効果を確認しましょう:
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 ))
応答データが変更され、エフェクトの実行がトリガーされると、それが実行されます () => 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 は主にスケジューラをキュー キューに追加してから、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) } }
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) } } }
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 }
以上がVue3 コンポーネントの非同期更新と nextTick 実行メカニズムのソース コード分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。