Eine kurze Analyse der asynchronen DOM-Aktualisierung von Vue

Datenobjekt: das von der Datenmethode in Vue zurückgegebene Objekt;

Dep-Objekt: Jedes Datenattribut erstellt ein Dep, um alle Watcher-Objekte zu sammeln, die diese Daten verwenden.

Watcher-Objekt: wird hauptsächlich zum Rendern von DOM verwendet

Das Prinzip der asynchronen DOM-Aktualisierung durch Vue

Datenaktualisierungen in Vue sind asynchron, was bedeutet, dass wir die geänderten DOM-Elemente nicht sofort nach der Änderung der Daten abrufen können.

1. Wann können wir das echte DOM-Element erhalten?

im nextTick-Rückruf von Vue.

2 Warum muss Vue die nextTick-Methode verwenden, um das neueste DOM zu erhalten?

2.1 Wenn vue Watcher aufruft, um die Ansicht zu aktualisieren, führt es keine direkte Aktualisierung durch, sondern fügt den Watcher, der aktualisiert werden muss, zur Warteschlange hinzu und übergibt dann die spezifische Aktualisierungsmethode flushSchedulerQueue zum Aufruf an nexTick.

// src > core > observer > watcher.js + scheduler.js // Wenn Daten aktualisiert werden, wird der folgende Code nacheinander ausgeführt // 1. Data.set auslösen
// 2. Rufen Sie dep.notify auf
// 3. Dep durchläuft alle zugehörigen Watcher und führt die Update-Methode class Watcher { aus.
  // 4. Update-Operation ausführen update() {
    Warteschlangenwächter(dies);
  }
}

const Warteschlange = [];

Funktion queueWatcher(watcher: Watcher) {
  // 5. Fügen Sie den aktuellen Watcher zur asynchronen Warteschlange hinzu queue.push(watcher);
  // 6. Führen Sie die asynchrone Warteschlange aus und übergeben Sie den Rückruf nextTick(flushSchedulerQueue);
}

// Spezielle Methode zum Aktualisieren der Ansichtsfunktion flushSchedulerQueue() {
  lass Beobachter, ID;
  // Sortieren, zuerst den übergeordneten Knoten rendern, dann den untergeordneten Knoten rendern // Dadurch kann unnötiges Rendern des untergeordneten Knotens vermieden werden, beispielsweise: Der untergeordnete Knoten, dessen v-if im übergeordneten Knoten falsch ist, muss nicht gerendert werden queue.sort((a, b) => a.id - b.id);
  // Alle Watcher für Batch-Updates durchlaufen.
  für (Index = 0; Index < Warteschlangenlänge; Index++) {
    Beobachter = Warteschlange[Index];
    // Aktualisiere das DOM
    watcher.run();
  }
} 

2.2 nextTick – Fügen Sie die übergebene FlushSchedulerQueue zum Callback-Array hinzu und führen Sie dann die Methode TimerFunc aus.

const Rückrufe = [];
lass timerFunc;

Funktion nextTick(cb?: Funktion, ctx?: Objekt) {
  lass _resolve;
  // 1. Füge die übergebene Methode flushSchedulerQueue zum Callback-Array hinzu callbacks.push(() => {
    cb.call(ctx);
  });
  // 2. Asynchrone Aufgaben ausführen // Diese Methode wählt je nach Browserkompatibilität unterschiedliche asynchrone Strategien timerFunc() aus.
}

2.3 timerFunc-Methode – ist eine asynchrone Methode, die auf Basis der Browserkompatibilität erstellt wurde. Nach der Ausführung dieser Methode wird die Methode flushSchedulerQueue aufgerufen, um bestimmte DOM-Updates durchzuführen.

lass timerFunc;
// Bestimmen Sie, ob es mit Promise kompatibel ist
wenn (Typ von Promise !== "undefiniert") {
  Timerfunktion = () => {
    Versprechen.auflösen().dann(flushCallbacks);
  };
  // Bestimmen Sie, ob es mit MutationObserver kompatibel ist
  // https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
} sonst wenn (Typ von MutationObserver !== "undefined") {
  lass Zähler = 1;
  const observer = neuer MutationObserver(flushCallbacks);
  const textNode = document.createTextNode(String(counter));
  Beobachter.beobachten(textNode, {
    Zeichendaten: wahr,
  });
  Timerfunktion = () => {
    Zähler = (Zähler + 1) % 2;
    textNode.data = String(Zähler);
  };
  // Bestimmen Sie, ob es mit setImmediate kompatibel ist
  // Diese Methode existiert in einigen IE-Browsern} else if (typeof setImmediate !== "undefined") {
  // Dies ist eine Makroaufgabe, aber besser als setTimeout timerFunc = () => {
    setImmediate(flushCallbacks);
  };
} anders {
  // Wenn keine der oben genannten Methoden bekannt ist, verwenden Sie setTimeout 0
  Timerfunktion = () => {
    setTimeout(flushCallbacks, 0);
  };
}

// Nach der asynchronen Ausführung alle Rückrufmethoden ausführen, dh flushSchedulerQueue ausführen
Funktion FlushCallbacks() {
  für (lass i = 0; i < Kopien.Länge; i++) {
    Rückrufe[i]();
  }
} 

2.4 Verbessern Sie das logische Urteilsvermögen

2.4.1 Bestimmen Sie das „Hat“-Flag, um zu vermeiden, dass derselbe Beobachter zu einer Warteschlange hinzugefügt wird.

2.4.2 Bestimmen Sie das Warte-Flag und aktualisieren Sie alle Beobachter innerhalb eines Ticks.

2.4.3 Bestimmen Sie das Flush-Flag und verarbeiten Sie den neuen Watcher, der möglicherweise generiert wird, wenn der Watcher gerendert wird.

Wenn die v-if-Bedingung ausgelöst wird, wird der neu hinzugefügte Watcher gerendert.

Tipp: nextTick ist nur eine asynchrone Aufgabe, die durch Promise, setTimeout und andere Methoden simuliert wird.

3 Warum kann this.$nextTick das aktualisierte DOM abrufen?

Der Aufruf von this.$nextTick ruft tatsächlich die nextTick-Methode im Diagramm auf und führt die Rückruffunktion in der asynchronen Warteschlange aus. Gemäß dem First-In-First-Out-Prinzip wird zuerst die asynchrone Aktualisierungswarteschlange ausgeführt, die durch die Änderung von Daten ausgelöst wird. Nach Abschluss der Ausführung wird ein neues DOM generiert. Wenn als nächstes die Rückruffunktion von this.$nextTick ausgeführt wird, kann das aktualisierte DOM-Element abgerufen werden.

// Wir verwenden this.$nextTick um die Methode nextTick aufzurufen Vue.prototype.$nextTick = function (fn: Function) {
  gib nächstenTick zurück(fn, this);
};

Zusammenfassung: Das Prinzip der asynchronen Aktualisierung von Vue

Wenn die Daten in Vue geändert werden, wird bei allen mit diesen Daten verknüpften Watchern eine Aktualisierung ausgelöst. Zuerst werden alle Beobachter zur Warteschlange hinzugefügt. Rufen Sie dann die Methode nextTick auf, um asynchrone Aufgaben auszuführen. Sortieren Sie im Rückruf der asynchronen Aufgabe die Watcher in der Warteschlange und führen Sie dann die entsprechenden DOM-Updates durch.

Dies ist das Ende dieses Artikels über die Implementierung der asynchronen Vue-Aktualisierung von DOM. Weitere relevante Inhalte zur asynchronen Vue-Aktualisierung von DOM finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!