Was ist der Unterschied zwischen React und Vue Virtual Dom?

Es gibt keinen Unterschied zwischen dem virtuellen Dom von React und Vue. Der virtuelle Dom von React und Vue verwendet beide js-Objekte, um den realen DOM zu simulieren, und verwendet den Diff des virtuellen DOM, um die Aktualisierung des realen DOM zu minimieren Sie können unnötige Leistungseinbußen reduzieren, indem Partikelgrade in verschiedene Typen unterteilt werden, um DOM-Knoten auf derselben Ebene zu vergleichen und Vorgänge zum Hinzufügen, Löschen und Verschieben auszuführen.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Was ist der Unterschied zwischen dem virtuellen Dom von React und Vue?

Kein Unterschied.

Der virtuelle DOM von React und Vue ist derselbe. Beide verwenden JS-Objekte, um den realen DOM zu simulieren, und verwenden dann den Diff des virtuellen DOM, um die Aktualisierung des realen DOM zu minimieren.

Mit Ausnahme einiger weniger Implementierungen ist die erste Hälfte der beiden (Verwendung von JS-Objekten zur Simulation des echten DOM) fast identisch.

Für die zweite Hälfte (Verwendung des virtuellen DOM-Diffs, um die Aktualisierung des realen DOM zu minimieren) sind die beiden Algorithmen ähnlich, einschließlich Ersetzen, Löschen, Einfügen usw.

Sowohl Vue als auch React verwenden den virtuellen Dom-Algorithmus, um die Aktualisierung zu minimieren des echten DOM, wodurch unnötige Leistungsverluste reduziert werden.

Je nach Granularität ist es in Baumdiff, Komponentendiff und Elementdiff unterteilt. Baumdiff vergleicht DOM-Knoten auf derselben Ebene und führt Vorgänge zum Hinzufügen, Löschen und Verschieben aus. Wenn eine Komponente gefunden wird, wird der Tree-Diff-Prozess neu gestartet.

Obwohl die beiden Update-Strategien für DOM unterschiedlich sind, verwendet React ein Top-Down-Full-Diff und Vue ein Teilabonnementmodell. Aber das hat eigentlich nichts mit virtuellem Dom zu tun. Die Aktualisierungsstrategie von Dom unterscheidet sich von oben nach unten vollständig und muss nicht den gesamten Komponentenbaum neu rendern.

1. Wenn sich der Status ändert, wird der Komponentenbaum vollständig von oben nach unten geändert, die Seite neu gerendert, ein neuer virtueller Dom-Baum neu generiert, der alte und der neue Dom-Baum verglichen und teilweise gepatcht Aktualisieren Sie das DOM. Um unnötige Aktualisierungen der untergeordneten Komponente zu vermeiden, die durch die Aktualisierung der übergeordneten Komponente verursacht werden, kann React in ShouldComponentUpdate logische Entscheidungen treffen, unnötige Renderings reduzieren und das virtuelle DOM neu generieren, um einen Differenzvergleichsprozess durchzuführen.2 vue, konvertieren Sie alle diese Dateneigenschaften über Object.defineProperty in Getter/Setter. Gleichzeitig zeichnet das Watcher-Instanzobjekt die Eigenschaft als dep auf, wenn die Komponente gerendert wird. Wenn der Setter im dep-Element aufgerufen wird, wird watch zur Neuberechnung aufgefordert, wodurch die zugehörige Komponente aktualisiert wird.

Diff-Algorithmus verwendet den Schlüssel des Elements, um zu bestimmen, ob das Element hinzugefügt, gelöscht oder geändert wird, wodurch unnötiges erneutes Rendern von Elementen reduziert wird.

Empfohlenes Lernen: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen React und Vue Virtual Dom?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!