Asynchronous update of components
We should all know or have heard that component updates are asynchronous. For nextTick, we also know that it uses promise to put the incoming callback function into the microtask queue and executes after the function is updated. So since it is all asynchronously updated, how does nextTick ensure that the callback will be executed after the component is updated, and when is the time to insert the queue? With these questions, we go to the source code to find the answers.
Let’s first review the effect of component updates:
const effect = ( = new ReactiveEffect( componentUpdateFn, () => queueJob(update), // update: () => () Return value componentUpdateFn // Add effect to component // track it in component's effect scope ))
It will be executed when the responsive data changes and triggers the effect execution.() => queueJob(update)Scheduler, so we have to see what queueJob does
queueJob
// packages/runtime-core/src/
export function queueJob(job: SchedulerJob) {
if (
! ||
!( // Is the same job already present in the queue job,
isFlushing && ? flushIndex + 1 : flushIndex
)
) {
if ( == null) {
// Add job to queue is an array (job)
} else {
(findInsertionIndex(), 0, job)
}
// Execute queueFlush queueFlush()
}
}
queueJob mainly adds scheduler to queue queue and then executes queueFlush
queueFlush
function queueFlush() {
// isFlushing and isflushPending initial values are false // It means that there is no flush task currently being executed, and there is no flush task waiting for execution if (!isFlushing && !isFlushPending) {
// The first execution of queueFlush sets isFlushPending to true means that there is a flush task waiting for execution isFlushPending = true
// resolvedPromise is () // flushJobs is placed in the micro task queue and waits for all synchronous schedulers to be executed after execution is completed // This ensures that flushJobs is only executed once in a component update // Update currentFlushPromise for nextTick currentFlushPromise = (flushJobs)
}
}
flushJobs
When all synchronous schedulers are executed, they will process tasks in the microtask queue and execute the flushJobs callback function
function flushJobs(seen?: CountMap) {
// Change the status to flush is being executed 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.
// The order of components is updated from parent to child. Because the parent component is always created before the child component, its rendering effect will have a smaller priority // If a component is uninstalled during parent component update, it can be skipped (comparator)
...
// First execute the job in queue and then execute the job in pendingPostFlushCbs // Here you can implement postFlush in watch try {
for (flushIndex = 0; flushIndex < ; flushIndex++) {
const job = queue[flushIndex]
if (job && !== false) {
if (__DEV__ && check(job)) {
continue
}
// (`running:`, )
// Execute job callWithErrorHandling(job, null, )
}
}
} finally {
// Clear the queue after the job is executed flushIndex = 0
= 0
// Execute flushPostFlushCbs at this time the component has been updated flushPostFlushCbs(seen)
isFlushing = false
currentFlushPromise = null
// some postFlushCb queued jobs!
// keep flushing until it drains.
if ( || ) {
flushJobs(seen)
}
}
}
Summarize:
When the responsive data is modified in the component, the component update function will be placed in the queue, and then a micro-task is registered. This micro-task is responsible for executing all jobs in the queue. Therefore, even if we synchronize multiple/multiple responsive data, the update function of the same component will only be placed in the queue once. The registered micro-task will be executed until the synchronization operation is completed. The component update function will be executed and the component will be updated.
nextTick
The implementation of nextTick in vue3 is very simple:
export function nextTick<T = void>(
this: T,
fn?: (this: T) => void
): Promise<void> {
const p = currentFlushPromise || resolvedPromise
// Put the nextTick callback function into the micro task queue of currentFlushPromise return fn ? (this ? (this) : fn) : p
}
The key here is currentFlushPromise. If you are careful enough, you will find that currentFlushPromise is actually assigned in queueFlush. It is the promise in the micro queue that executes the component update function. So when we get the currentFlushPromise, just put the function callback received by nextTick to the back of flushJobs in the micro queue. When the flushJobs is executed, the component has been updated. This is the time when we hope to execute the nextTick callback! !
The above is the detailed content of the asynchronous update of Vue3 components and the source code interpretation of nextTick running mechanism. For more information about asynchronous update of nextTick of Vue3 components, please pay attention to my other related articles!