Zusammenfassung des Verständnisses des virtuellen DOM in Vue

Es handelt sich im Wesentlichen um ein allgemeines JS-Objekt, das zur Beschreibung der Ansichtsschnittstellenstruktur verwendet wird.

Im Rückruf von mouted können Sie _vnode ausgeben,

Aus der Abbildung können wir erkennen, dass _vnode die folgenden Hauptattribute hat:

• tag: der Tag-Name der Komponente,
• Daten: Komponenteneigenschaften,
• Kinder: untergeordnete Tags der Komponente
• parent: übergeordnetes Element

Renderfunktion:

Funktion: Erstellen eines virtuellen Doms,

Jede Komponente hat einen virtuellen DOM, und der virtuelle DOM wird von der Renderfunktion erstellt.

Der Zweck der Verwendung eines virtuellen DOM-Baums: Verbesserung der Rendering-Effizienz

In Vue wird die Renderfunktion aufgerufen, wenn die Ansicht gerendert wird. Dieses Rendering erfolgt nicht nur, wenn die Komponente erstellt wird, sondern auch, wenn die Daten, von denen die Ansicht abhängt, aktualisiert werden.

Aufgrund der Erstellung und Aktualisierung des realen DOM. Vorgänge wie das Einfügen verbrauchen viel Leistung und verringern dadurch die Rendereffizienz. Daher wird anstelle des realen DOM ein virtueller DOM-Baum verwendet.

So konvertieren Sie virtuellen Dom in realen Dom

Das erste Rendern der Komponenteninstanz: Generieren Sie einen virtuellen DOM-Baum, erstellen Sie einen realen DOM basierend auf dem virtuellen DOM-Baum und mounten Sie den realen DOM an der entsprechenden Position der Seite. Zu diesem Zeitpunkt entspricht jeder virtuelle DOM einem realen DOM.

Hinweis: Im virtuellen DOM sind alle Elm-Attribute reale DOMs, d. h., das generierte virtuelle DOM erstellt auch das reale DOM. Das heißt, beim ersten Rendern ist Vue weniger effizient als das einfache Erstellen von DOM-Elementen. Die Effizienz von Vue spiegelt sich im Vergleich des virtuellen DOM mit reaktionsfähigen Datenänderungen wider.

Wenn die Daten, von denen die Komponente abhängt, von responsiven Daten betroffen sind: Rufen Sie die Renderfunktion erneut auf, um einen virtuellen DOM-Baum zu erstellen, vergleichen Sie die neuen und alten virtuellen DOM-Bäume. Vue ermittelt die minimale Aktualisierungsmenge, aktualisiert dann die erforderlichen virtuellen DOM-Knoten und ändert schließlich den entsprechenden realen DOM. Dadurch wird sichergestellt, dass die Änderungen am tatsächlichen DOM nur minimal sind.

Die Anzahl der realen DOM-Attribute ist viel größer als die der virtuellen DOM-Attribute, und jedes Hinzufügen oder Löschen des realen DOM führt zu Reflow- und Neuzeichnungsproblemen. Dies ist sehr leistungsintensiv.

Hinweis: Vergleich des Zeitaufwands zum Erstellen von echtem DOM und gewöhnlichen Objekten

Es ist ersichtlich, dass das Erstellen eines DOM-Objekts mehr als 20-mal so lange dauert wie das Erstellen eines gewöhnlichen Objekts.

Die Beziehung zwischen Vorlage und virtuellem DOM

Im Vue-Framework gibt es eine Kompilierungsvorlage, die hauptsächlich für die Konvertierung der Vorlage in eine Renderfunktion verantwortlich ist. Nach dem Aufruf erhält die Renderfunktion den virtuellen DOM.

Der Kompilierungsprozess gliedert sich in zwei Schritte

1. Konvertieren Sie die Vorlagenzeichenfolge in AST (Abstract Syntax Tree), wobei Sie die JS-Baumstruktur verwenden, um den Originalcode zu beschreiben. Die folgende Abbildung zeigt die Struktur durch die AST-Online-Konvertierung.

2. Konvertieren Sie AST in eine Renderfunktion

Laufzeitkompilierung und Vorlagenvorkompilierung

Wenn die herkömmliche Importmethode verwendet wird, erfolgt die Kompilierung beim ersten Laden der Komponente. Dies wird als Laufzeitkompilierung bezeichnet.

Wenn die Kompilierung in vue-cli standardmäßig zum Zeitpunkt der Verpackung erfolgt (npm run build / serve), wird es zur Vorkompilierung der Vorlage.

Die Kompilierung ist ein äußerst leistungsintensiver Vorgang. Durch Vorkompilierung kann die Laufzeitleistung effektiv verbessert werden. Da die Kompilierung während der Laufzeit nicht mehr erforderlich ist, schließt vue-cli außerdem das Kompilierungsmodul in vue beim Verpacken aus, um die Verpackungsgröße zu verringern. Der Zweck der Vorlagen besteht lediglich darin, Entwicklern das Schreiben von Code zu erleichtern.

Wissenspunkterweiterung:

Die Rolle des virtuellen Doms

Die aktuellen Mainstream-Frameworks sind alle Frameworks für deklarative DOM-Operationen. Wir müssen nur die Zuordnungsbeziehung zwischen dem Status und dem DOM beschreiben. Das Framework hilft uns dabei, den Status in die Ansicht (das echte DOM) zu konvertieren.

Der einfachste Ansatz besteht darin, den Status in einer Ansicht darzustellen und die gesamte Ansicht bei jeder Aktualisierung des Status zu aktualisieren.

Die Leistung dieses Ansatzes kann man sich vorstellen. Eine bessere Idee ist: Wenn sich der Status ändert, werden nur die mit dem Status verbundenen DOM-Knoten aktualisiert. Virtueller DOM ist nur eine Möglichkeit, diese Idee umzusetzen.

Konkrete Schritte:

Status -> Realer Dom (zunächst)

Status -> Virtueller DOM -> Realer DOM (unter Verwendung des virtuellen DOM)

Wenn sich der Status ändert, wird ein neuer virtueller DOM generiert, der vorherige mit diesem verglichen, die Teile gefunden, die aktualisiert werden müssen, und der reale DOM wird aktualisiert.

Virtueller DOM in Vue

Das reale Dom besteht aus Knoten (Node) und das virtuelle Dom besteht aus virtuellen Knoten (vNode).

Der virtuelle DOM erledigt in Vue hauptsächlich zwei Aufgaben:

Stellt virtuelle Knoten (vNode) bereit, die den realen Knoten (Node) entsprechen

Vergleichen Sie den neuen virtuellen Knoten mit dem alten virtuellen Knoten, finden Sie die Unterschiede und aktualisieren Sie dann die Ansicht

Damit ist dieser Artikel mit der Zusammenfassung der Wissenspunkte zum Verständnis des virtuellen DOM in Vue abgeschlossen. Weitere Informationen zum Verständnis des virtuellen DOM in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!