Mise à jour asynchrone du composant Vue3 et analyse du code source du mécanisme d'exécution nextTick

Mise à jour asynchrone des composants

Nous devrions tous savoir ou avoir entendu dire que la mise à jour des composants est asynchrone. Pour nextTick, nous savons également qu'il utilise la promesse pour placer la fonction de rappel entrante dans la file d'attente des microtâches et l'exécute une fois la fonction terminée. update , donc comme ce sont toutes des mises à jour asynchrones, comment nextTick garantit-il que le rappel sera exécuté après la mise à jour du composant et quel est le moment de son insertion dans la file d'attente ? Avec ces questions, nous allons au code source pour trouver des réponses.

Première revue de l'effet de la mise à jour du composant :

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

Lorsque les données réactives changent et déclenchent l'exécution de l'effet, le () => queueJob(update)scheduler sera exécuté, nous devons donc voir ce que fait queueJob

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 planifie principalement le planificateur Ajoutez-le à la file d'attente, puis exécutez 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

Lorsque tous les planificateurs de synchronisation sont exécutés, les tâches de la file d'attente des microtâches seront traitées et la fonction de rappel flushJobs sera exécutée

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

Résumé :

Composant Après avoir modifié les données réactives, la fonction de mise à jour du composant sera placée dans la file d'attente, puis une microtâche sera enregistrée. Cette microtâche est responsable de l'exécution de tous les travaux dans la file d'attente, donc même si nous modifions plusieurs/plusieurs réactifs. données simultanément, la fonction de mise à jour du même composant ne sera mise dans la file d'attente qu'une seule fois et la microtâche enregistrée ne sera exécutée qu'une fois l'opération de synchronisation terminée, la fonction de mise à jour du composant sera exécutée et le composant sera mis à jour.

nextTick

L'implémentation de nextTick dans vue3 est très 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
}

La clé ici est currentFlushPromise Si vous êtes suffisamment prudent, vous constaterez que currentFlushPromise est en fait attribué dans queueFlush. fonction. Entrez la promesse dans la micro file d'attente, nous obtenons donc ici le currentFlushPromise et plaçons le rappel de fonction reçu par nextTick derrière flushJobs dans la micro file d'attente. Une fois l'exécution de flushJobs terminée, le composant a été mis à jour à ce moment. pour exécuter Le timing du rappel nextTick !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!