Vue3 component asynchronous update and nextTick running mechanism source code analysis

Asynchronous update of components

We should all know or have heard that the update of components is asynchronous. For nextTick, we also know that it uses promise to put the incoming callback function into the microtask queue. It is executed after the function is updated. So since they are all asynchronous updates, how does nextTick ensure that the callback will be executed after the component is updated, and when is the timing of inserting it into the queue? With these questions we go to the source code to find answers.

Let’s first review the effect of component update:

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
))

When the responsive data changes and triggers the effect execution, it will be executed () => queueJob(update)Scheduling processor, so we have to see what queueJob does

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 mainly adds the scheduler to the queue queue, and then executes queueFlush

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)
  }
}

flushJobs

When all synchronization schedulers are executed, the tasks in the microtask queue will be processed, and the flushJobs callback function will be executed

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)
    }
  }
}

Summary:

Components After modifying the responsive data, the component update function will be placed in the queue, and then a microtask will be registered. This microtask is responsible for executing all jobs in the queue, so even if we modify multiple/multiple responsive data simultaneously , the update function of the same component will only be put into the queue once, and the registered microtask will be executed only after 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
  // nextTick回调函数放到currentFlushPromise的微任务队列中
  return fn ? p.then(this ? fn.bind(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 that puts the task of executing the component update function into the micro queue, so here we get the currentFlushPromise and just put the function callback received by nextTick behind flushJobs in the micro queue. After the flushJobs execution is completed, the component will The update has been completed. This is the time we want to execute the nextTick callback!

The above is the detailed content of Vue3 component asynchronous update and nextTick running mechanism source code analysis. For more information, please follow other related articles on the PHP Chinese website!