Über das Vue Virtual Dom-Problem

1. Was ist virtueller Dom?

Virtueller DOM ist im Wesentlichen ein allgemeines JS-Objekt, das zum Beschreiben der Schnittstellenstruktur der Ansicht verwendet wird.

In Vue hat jede Komponente eine Renderfunktion.

Wenn kein Render vorhanden ist, suchen Sie nach einer Vorlage. Wenn keine Vorlage vorhanden ist, suchen Sie nach el. Wenn el vorhanden ist, wird el.outHTML als Vorlage verwendet und dieser String dann in eine Renderfunktion kompiliert.
Wenn es eine Vorlage gibt, suche ich nicht weiter. Dasselbe gilt für das Rendern.

Jede Renderfunktion gibt einen virtuellen DOM-Baum zurück, was bedeutet, dass jede Komponente einem virtuellen DOM-Baum entspricht.
Mit anderen Worten besteht der Zweck des Renderns darin, einen virtuellen DOM zu erstellen, was genau diese Komponente anzeigt.
console.log('rendern'); ↓

Off topic: console.dir() kann alle Eigenschaften und Methoden eines Objekts anzeigen.

Wenn keine Rückgabe erfolgt, ist auf der Seite kein echtes DOM vorhanden.
Rückgabe hinzufügen↓

Der Name der h-Funktion ist benutzerdefiniert, die Struktur der h-Funktion ist h(Label, {eigene Attribute}, [Unterelement]).
Das Unterelement wird weiterhin mit der h-Funktion erzeugt. Da es noch weitere Attribute gibt, erzeugen wir in [ ] ein weiteres Unterelement.

Die h-Funktion trifft eine Entscheidung. Wenn es sich nicht um ein Objekt handelt, handelt es sich um einen Textknoten. ↑ Es wird davon ausgegangen, dass die Konfiguration in der Mitte weggelassen wird

Auf der Seite gerendert.
Konsole.log(vnode);

h1 untergeordnetes Element↓

Entsprechend realen Knoten durch .elm

h('h1','{ {title}}') ist definitiv nicht akzeptabel, es muss h('h1',this.title) sein.

2. Warum brauchen wir virtuellen Dom?

In Vue wird beim Rendern einer Ansicht die Renderfunktion aufgerufen. Dieses Rendering erfolgt nicht nur, wenn die Komponente erstellt wird, sondern auch, wenn die Daten aktualisiert werden, von denen die Ansicht abhängt. Wenn der reale DOM während des Renderns direkt verwendet wird, führt das Erstellen, Aktualisieren und Einfügen des realen DOM zu erheblichen Leistungsverlusten, was die Rendereffizienz erheblich verringert.
Daher verwendet Vue beim Rendern virtuelles DOM anstelle von realem DOM, hauptsächlich um das Problem der Rendering-Effizienz zu lösen.

Beim ersten Laden ist es kein Problem, den echten DOM zu generieren, da dies unvermeidlich und notwendig ist.
Die Renderfunktion wird nicht nur einmal, sondern bei jeder Änderung der Daten generiert.
Wenn jedoch createElement beim Rendern verwendet wird, wird jedes Mal ein neues DOM-Element generiert, was zu aufwändig ist.

3. Wie wird der virtuelle DOM in den realen DOM umgewandelt?

Wenn eine Komponenteninstanz zum ersten Mal gerendert wird, generiert sie zuerst einen virtuellen DOM-Baum, durchläuft die Knoten zuerst in der Tiefe, legt Attribute fest und erstellt dann basierend auf dem virtuellen DOM-Baum einen realen DOM. Sie hängt den realen DOM an der entsprechenden Position auf der Seite ein und ersetzt direkt div#app. An diesem Punkt entspricht jeder virtuelle DOM einem realen DOM.

Es ist nicht gleich, weil div#app direkt ersetzt wird

Wenn eine Komponente von Änderungen der Reaktionsdaten betroffen ist und erneut gerendert werden muss, ruft sie die Renderfunktion dennoch erneut auf, um einen neuen virtuellen DOM-Baum zu erstellen, den neuen Baum mit dem alten Baum zu vergleichen und durch den Vergleich die minimale Aktualisierungsmenge zu ermitteln und dann die erforderlichen realen DOM-Knoten zu aktualisieren, wodurch die minimale Änderung am realen DOM sichergestellt wird.

Überprüfen Sie mithilfe des Diff-Algorithmus, ob sich die beiden virtuellen DOMs unterscheiden, und ändern Sie dann den realen DOM der entsprechenden Knoten, um den gewünschten Effekt zu erzielen. Stellen Sie dabei sicher, dass die Änderungen minimal sind, und verbessern Sie die Effizienz.

4. Die Beziehung zwischen Vorlage und virtuellem DOM

Virtueller DOM, erstellt durch Scaffolding

Im Vue-Framework gibt es ein Kompilierungsmodul, das 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 ist in zwei Schritte unterteilt (sowohl Babel als auch Webpack werden auf diese Weise erstellt):

Konvertieren Sie die Vorlagenzeichenfolge in einen AST (abstrakten Syntaxbaum, der unsere Inhalte in einer Baumstruktur beschreibt) und konvertieren Sie den AST in eine Renderfunktion

AST↓, lassen Sie mich erwähnen, dass AST mit einem Stapel aufgebaut ist

Wenn die herkömmliche Importmethode (src) verwendet wird, erfolgt die Kompilierung beim ersten Laden der Komponente. Dies wird als Laufzeitkompilierung bezeichnet. Auch hier ist Schritt 1 sehr zeitaufwändig.
Wenn es sich um die Standardkonfiguration von vue-cli handelt, erfolgt die Kompilierung während der Verpackung, was als Vorlagenvorkompilierung bezeichnet wird.
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.

Wenn die Vorlage oben nicht geschrieben ist

Es wird ein Fehler gemeldet, aber Sie können es in vue.config.js konfigurieren

module.export={runtimeCompiler:true}

Nicht empfohlen, da dadurch kompilierter Inhalt hinzugefügt und der Inhalt größer wird. (Ich möchte esbuild und vite erwähnen, um das Verpacken zu beschleunigen? Ich habe sie nicht verwendet.)

Der Zweck der Vorlagen besteht lediglich darin, Entwicklern das Schreiben von Schnittstellencodes zu erleichtern.
Wenn Vue schließlich ausgeführt wird, wird die Renderfunktion benötigt, nicht die Vorlage. Daher sind die verschiedenen Syntaxen in der Vorlage im virtuellen DOM nicht vorhanden und werden alle zur Konfiguration des virtuellen DOM.

Äquivalent zu

Beispiel: Automatisches Erstellen eines Verzeichnisses

Jetzt müssen Sie eine Komponente erstellen, die basierend auf dem Inhalt in ihrem Slot automatisch ein Verzeichnis generieren kann.

Dies ist das Ende dieses Artikels über Vue Virtual Dom-Probleme. Weitere verwandte Inhalte zu Vue Virtual Dom finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird.