Asynchrone Aktualisierung der Vue3-Komponente und Analyse des Quellcodes des NextTick-Laufmechanismus

Asynchrone Aktualisierungen von Komponenten

Wir alle sollten wissen oder gehört haben, dass Komponentenaktualisierungen asynchron sind. Wir wissen auch, dass es Versprechen verwendet, um die eingehenden Rückruffunktionen in Mikrotasks zu integrieren Da es sich also bei allen um asynchrone Aktualisierungen handelt, stellt nextTick sicher, dass der Rückruf ausgeführt wird, nachdem die Komponente aktualisiert wurde, und wann ist es Zeit, ihn in die Warteschlange einzufügen? Bei diesen Fragen gehen wir zum Quellcode, um Antworten zu finden.

Lassen Sie uns zunächst die Auswirkung der Komponentenaktualisierung überprüfen:

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

Wenn sich die Reaktionsdaten ändern und die Ausführung des Effekts auslösen, wird der () => queueJob(update)-Planer ausgeführt, also Wir müssen es uns ansehen. Was macht 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()
  }
}

Zusammenfassung: #🎜 🎜#

Wenn die Reaktionsdaten in der Komponente geändert werden, wird die Komponentenaktualisierungsfunktion in die Warteschlange gestellt und dann eine Mikrotask registriert Alle Jobs in der Warteschlange werden ausgeführt. Selbst wenn wir mehrere Aufgaben gleichzeitig ändern oder mehrere Antwortdaten verwenden, wird die Aktualisierungsfunktion derselben Komponente nur einmal in die Warteschlange gestellt. Die registrierte Mikroaufgabe wird erst ausgeführt, nachdem der Synchronisierungsvorgang abgeschlossen ist , die Komponentenaktualisierungsfunktion wird ausgeführt und die Komponente wird erneuert.

nextTick

Die Implementierung von nextTick in vue3 ist sehr einfach:

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

Der Schlüssel hier ist currentFlushPromise. Wenn Sie vorsichtig genug sind, werden Sie es tun Stellen Sie fest, dass currentFlushPromise tatsächlich ein Wert in queueFlush zugewiesen ist. Dies ist das Versprechen, das die Aufgabe zum Ausführen der Komponentenaktualisierungsfunktion in die Mikrowarteschlange stellt. Hier erhalten wir also currentFlushPromise und fügen den von nextTick empfangenen Funktionsrückruf direkt nach FlushJobs ein Mikrowarteschlange. Nachdem „flushJobs“ ausgeführt wurde, wurde die Komponente aktualisiert. Dies ist der Zeitpunkt, zu dem wir den nextTick-Rückruf ausführen möchten.

Das obige ist der detaillierte Inhalt vonAsynchrone Aktualisierung der Vue3-Komponente und Analyse des Quellcodes des NextTick-Laufmechanismus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!