Detaillierte Erklärung zum virtuellen Javascript-DOM

Was ist virtueller Dom?

Virtueller DOM ist im Wesentlichen ein allgemeines JS-Objekt (der Inhalt dieses Objekts wird in mount._vnode gedruckt), das zum Beschreiben der Schnittstellenstruktur der Ansicht verwendet wird.

In Vue hat jede Komponente eine Renderfunktion, und jede Renderfunktion gibt einen virtuellen DOM-Baum zurück, was bedeutet, dass jede Komponente einem virtuellen DOM-Baum entspricht.

vnode ist ein allgemeines JS-Objekt, das verwendet wird, um zu beschreiben, was auf der Schnittstelle stehen soll, beispielsweise:

var vnode = {
  tag: "h1",
  Kinder: [
    { tag: undefined, text: "Die erste Vue-Anwendung: Hallo Welt"}
  ]
}

Das obige Objekt beschreibt:

Es gibt einen Knoten mit dem Tag-Namen h1, der einen untergeordneten Knoten hat, der ein Text mit dem Inhalt „Erste Vue-Anwendung: Hallo Welt“ ist.

Warum brauchen wir virtuellen Dom?

In Vue wird zum Rendern der 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.

Vergleichen Sie die Effizienz beim Erstellen von JS-Objekten und echten DOM-Objekten:

Ergebnis:

Zum Erstellen eines echten DOM müssen viele Attribute erstellt werden

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, erstellt dann basierend auf dem virtuellen DOM-Baum einen realen DOM und hängt den realen DOM an die entsprechende Stelle auf der Seite ein. Zu diesem Zeitpunkt entspricht jeder virtuelle DOM einem realen DOM. Wenn die Seite nur einmal aktualisiert wird und keine nachfolgenden Datenaktualisierungen erfolgen, ist die Verwendung eines virtuellen DOM weniger effizient als die direkte Anzeige des realen DOM.

Wenn eine Komponente von Änderungen der Reaktionsdaten betroffen ist und neu gerendert werden muss, ruft sie die Renderfunktion dennoch erneut auf, erstellt einen neuen virtuellen DOM-Baum, vergleicht den neuen Baum mit dem alten Baum, findet den Unterschied durch Vergleich und aktualisiert dann nur die virtuellen DOM-Knoten der verschiedenen Teile. Schließlich ändern diese aktualisierten virtuellen Knoten ihren entsprechenden realen DOM

Auf diese Weise wird der eigentliche DOM nur minimal verändert.

Die Beziehung zwischen Vorlage und virtuellem DOM

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 gliedert sich in zwei Schritte:

1. Konvertieren Sie die Vorlagenzeichenfolge in AST (Abstract Syntax Tree: Verwenden Sie die JS-Baumstruktur, um unseren Originalcode zu beschreiben; Online-Tool: https://astexplorer.net/)

2. Konvertieren Sie AST in eine Renderfunktion

Die Vue-Vorlage ist kein echtes DOM, sie wird in ein virtuelles DOM kompiliert

<div id="app">
  <h1>Die erste Vue-Anwendung: {{title}}</h1>
  <p>Autor: {{author}}</p>
</div>

Die obige Vorlage wird in einen virtuellen DOM kompiliert, der der folgenden Struktur ähnelt

{
  Tag: "div",
  Kinder: [
    { tag: "h1", children: [ { text: "Die erste Vue-Anwendung: Hallo Welt" } ] },
    { tag: "p", children: [ { text: "Autor: Yuan" } ] }
  ]
}

Wenn Sie die herkömmliche Importmethode ( script src="...vue.js ") verwenden, erfolgt die Kompilierung beim ersten Laden der Komponente. Dies wird als Laufzeitkompilierung bezeichnet.

Wenn es sich um die Standardkonfiguration von vue-cli handelt, erfolgt die Kompilierung npm run build build). Nach dem Verpacken gibt es keine Vorlage, sondern nur eine Renderfunktion, die 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.

Ob das Kompilierungsmodul eingeschlossen werden muss, wenn die Verpackung durch runtimeCompiler gesteuert wird: true in vue.config.js. Der Standardwert ist false, was bedeutet, dass es nicht eingeschlossen ist. Es wird nicht empfohlen, diese Konfiguration zu ändern

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.

Wenn in vue-cli sowohl eine Vorlage als auch ein Render vorhanden sind, wird aufgrund des Verpackungsprozesses bei der Vorkompilierung der Vorlage ein Render generiert, der die ursprüngliche Renderfunktion überschreibt.

Wenn in Vue sowohl Vorlage als auch Render gleichzeitig vorhanden sind, muss das Rendern Vorrang haben.

Der virtuelle DOM-Baum wird schließlich in einen realen DOM-Baum umgewandelt

Vue generiert einen Vnode-Baum mithilfe der folgenden Logik:

Hinweis: Der virtuelle Knotenbaum muss einwurzelig sein

Injektion

Vue fügt die folgende Konfiguration in die Vue-Instanz ein:

• data : Daten im Zusammenhang mit der Schnittstelle
• computed : Daten, die aus vorhandenen Daten berechnet werden, was später noch genauer erklärt wird
• methods : Methoden

Mitglieder der Vue-Instanz können in der Vorlage verwendet werden

Um Namenskonflikte zu vermeiden. Da die Daten in Daten an vue weitergeleitet werden, werden die Attribute in vue überschrieben, wenn der von uns geschriebene Datenname mit den Attributen in vue in Konflikt steht. Daher fügt vue vor dem Namen seines eigenen Attributmitglieds oder hinzu. Wenn es mit oder _ hinzugefügt wird, wenn es mit oder hinzugefügt wird, wenn es mit hinzugefügt wird, bedeutet dies, dass wir es verwenden können. Wenn es mit _ hinzugefügt wird, ist es eine von vue selbst verwendete Methode oder ein Attribut, und wir müssen es nicht aufrufen.

Montieren

Das Platzieren des generierten realen DOM-Baumes an einer bestimmten Elementposition wird als Mounten bezeichnet.

Montagemethode:

1. Konfigurieren Sie über el: „css selector“

2. Konfigurieren Sie über vue instance.$mount("css selector")

Gesamter Prozess

• Eine Instanz wird erstellt: new Vue()
• Erst nach Abschluss der Injektion erfolgt eine Reaktionsfähigkeit und die Überwachung von Datenänderungen
• Kompilieren und generieren Sie einen virtuellen DOM-Baum: Suchen Sie zuerst die Renderfunktion. Wenn keine Renderfunktion vorhanden ist, suchen Sie nach einer Vorlage zum Generieren und führen Sie schließlich „Render“ aus, um einen virtuellen DOM-Baum zu generieren
• Montage abgeschlossen: Die Seite zeigt
  

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!