Verwendung von VNode in Vue.js

Was ist VNode

In vue.js gibt es eine VNode-Klasse, die zum Instanziieren verschiedener Arten von Vnode-Instanzen verwendet werden kann, und verschiedene Arten von Vnode-Instanzen repräsentieren jeweils unterschiedliche Arten von DOM-Elementen.

Beispielsweise umfassen DOM-Elemente Elementknoten, Textknoten, Kommentarknoten usw. und Vnode-Instanzen entsprechen auch Elementknoten, Textknoten und Kommentarknoten.

Der VNode-Klassencode lautet wie folgt:

 exportiere Standardklasse VNode {
    Konstruktor(Tag, Daten, Kinder, Text, Ulme, Kontext, Komponentenoptionen, asynchrone Fabrik) {
       this.tag = Tag
        this.data = Daten
        this.children = Kinder
        dieser.text = Text
        diese.ulme = Ulme
        this.ns = undefiniert
        this.context = Kontext
        this.functionalContext = undefiniert
        this.functionalOptions = undefiniert
        this.functionalScopeId = undefiniert
        dieser.Schlüssel = Daten && Daten.Schlüssel
        this.componentOptions = Komponentenoptionen
        this.componentInstance = nicht definiert
        this.parent = undefiniert
        this.raw = falsch
        this.isStatic = falsch
        this.isRootInsert = true
        this.isComment = false
        this.isCloned = falsch
        this.isOnce = falsch
        this.asyncFactory = asyncFactory
        this.asyncMeta = nicht definiert
        this.isAsyncPlaceholder = falsch
    }
    hol Kind() {
        gib diese.Komponenteninstanz zurück
    }
 }
 

Wie aus dem obigen Code ersichtlich ist, ist vnode nur ein Name. Im Wesentlichen ist es ein gewöhnliches JavaScript-Objekt, das ein aus der VNode-Klasse instanziiertes Objekt ist. Wenn wir dieses JavaScript-Objekt verwenden, um ein echtes DOM-Element zu beschreiben, dann haben alle Attribute des DOM-Elements entsprechende Attribute im VNode-Objekt.

Vereinfacht ausgedrückt kann vnode als ein Knotenbeschreibungsobjekt verstanden werden, das beschreibt, wie ein echter DOM-Knoten erstellt wird.
Beispielsweise stellt „Tag“ den Namen eines Elementknotens dar, „Text“ den Text eines Textknotens, „Children“ untergeordnete Knoten usw. Vnode stellt ein echtes DOM-Element dar. Alle echten DOM-Knoten werden mit Vnode erstellt und in die Seite eingefügt.

VNode erstellt DOM und fügt es in die Ansicht ein

Die Abbildung zeigt den Vorgang der Verwendung von vnode zum Erstellen eines echten DOM und dessen Rendern in der Ansicht. Es ist ersichtlich, dass Vnode und Ansicht einander eins zu eins entsprechen. Wir können uns vnode als eine JavaScript-Objektversion eines DOM-Elements vorstellen.

Der Prozess zum Rendern einer Ansicht besteht darin, zuerst einen Vnode zu erstellen, dann mit dem Vnode ein echtes DOM-Element zu generieren und es schließlich in die Seiten-Rendering-Ansicht einzufügen.

Die Rolle des VNode

Da bei jeder Darstellung einer Ansicht zuerst ein Vnode erstellt und dann das von ihm erstellte reale DOM in die Seite eingefügt wird, kann der beim letzten Rendern der Ansicht erstellte Vnode zuerst zwischengespeichert werden. Wenn die Ansicht dann erneut gerendert werden muss, wird der neu erstellte Vnode mit dem zuletzt zwischengespeicherten Vnode verglichen, um zu sehen, welche Unterschiede zwischen ihnen bestehen, die Unterschiede herauszufinden und das reale DOM basierend darauf zu ändern.

Vue.js verwendet derzeit eine Statuserkennungsstrategie mit mittlerer Granularität. Wenn sich der Status ändert, wird dies nur auf Komponentenebene benachrichtigt und dann wird der virtuelle DOM innerhalb der Komponente zum Rendern der Ansicht verwendet.

Wie in der folgenden Abbildung gezeigt, werden bei einer Statusänderung nur die Komponenten benachrichtigt, die diesen Status verwenden. Das heißt, sobald sich einer der vielen von einer Komponente verwendeten Zustände ändert, muss die gesamte Komponente neu gerendert werden.

Wenn sich nur ein Knoten einer Komponente geändert hat, führt das erneute Rendern aller Knoten der gesamten Komponente offensichtlich zu einer enormen Leistungsverschwendung. Daher ist es wichtig, den Vnode-Cache zu aktivieren, den letzten Cache mit dem aktuell erstellten Vnode zu vergleichen und nur die Knoten zu aktualisieren, die sich unterscheiden. Dies ist auch die wichtigste Funktion von vnode.

Arten von VNodes

Es gibt viele verschiedene Arten von Vnodes, darunter die folgenden:

Kommentarknoten

1. Textknoten
2. Elementknoten
3. Komponentenknoten
4. Funktionsknoten
5. Knoten klonen

Wie bereits erwähnt, ist vnode ein JavaScript-Objekt. Verschiedene Arten von vnodes haben tatsächlich unterschiedliche Eigenschaften, genauer gesagt, unterschiedliche effektive Eigenschaften. Denn wenn Sie mit der VNode-Klasse einen Vnode erstellen und Attribute für die Instanz über Parameter festlegen, werden ungültige Attribute standardmäßig auf „undefiniert“ oder „false“ gesetzt. Ignorieren Sie ungültige Attribute auf dem Vnode einfach.

1. Kommentarknoten

Da der Vorgang zum Erstellen eines Kommentarknotens sehr einfach ist, führen wir seine Eigenschaften direkt über den Code ein:

    export const createEmptyVNode = text => {
        const node = neuer VNode()
        node.text = Text;
        node.isComment = wahr;
        Rückgabeknoten
    }

Ein Kommentarknoten hat nur zwei gültige Attribute: Text und isComment. Alle anderen Eigenschaften sind standardmäßig „undefiniert“ oder „false“.

Beispielsweise hat ein echter Kommentarknoten einen entsprechenden V-Knoten, der wie folgt aussieht:

// <!-- Kommentarknoten-->
{
    Text: "Kommentarknoten",
    isComment: true
}

2. Textknoten

Der Vorgang zum Erstellen eines Textknotens ist ebenfalls sehr einfach. Der Code lautet wie folgt:

    Exportfunktion erstelleTextVNode(Wert) {
        gibt neuen VNode zurück (undefiniert, undefiniert, undefiniert, String(val))
    }

Wenn ein Vnode vom Typ Text erstellt wird, verfügt er nur über ein Textattribut:

{
    Text: "Textknoten"
}
 

3. Knoten klonen

Beim Klonen eines Knotens werden die Eigenschaften eines vorhandenen Knotens einem neuen Knoten zugewiesen, sodass die Eigenschaften des neu erstellten Knotens und des geklonten Knotens konsistent sind und so ein Kloneffekt erzielt wird. Seine Funktion besteht darin, statische Knoten und Slot-Knoten zu optimieren.

Nehmen wir als Beispiel statische Knoten: Wenn sich ein Status in einer Komponente ändert, rendert die aktuelle Komponente die Ansicht über den virtuellen DOM erneut. Da sich der Inhalt statischer Knoten nicht ändert, außer beim ersten Rendern, bei dem die Rendering-Funktion ausgeführt werden muss, um den Vnode zu erhalten, müssen nachfolgende Updates die Rendering-Funktion nicht ausführen, um den Vnode neu zu generieren.

Daher wird der Vnode mit der Methode zum Erstellen eines Klonknotens geklont und der Klonknoten wird zum Rendern verwendet. Auf diese Weise muss die Rendering-Funktion nicht ausgeführt werden, um einen neuen Vnode für den statischen Knoten zu generieren, wodurch die Leistung bis zu einem gewissen Grad verbessert wird.

Der Code zum Erstellen eines geklonten Knotens lautet wie folgt:

Exportfunktion cloneVNode(vnode, deep) {
        const geklont = neuer VNode(vnode.tag, vnode.data, vnode.children, vnode.text, vnode.elm, vnode.context, vnode.componentOptions, vnode.asyncFactory)
        geklont.ns = vnode.ns
        geklont.isStatic = vnode.isStatic
        geklonter Schlüssel = vnode.key
        geklont.isComment = vnode.isComment
        geklont.isCloned = wahr
        wenn (deep && vnode.children) {
            geklont.Kinder = Klon-VNodes(vnode.Kinder)
        }
        Rückkehr geklont
    }

Um einen vorhandenen Knoten zu klonen, müssen Sie dem neuen Knoten lediglich alle Eigenschaften des vorhandenen Knotens zuweisen.
Der Unterschied zwischen der Verschiebung des geklonten Knotens und des geklonten Knotens ist die Eigenschaft isCloned, die für den geklonten Knoten „true“ und für den ursprünglichen Knoten, der geklont wird, „false“ ist.

4. Elementknoten

Elementknoten haben normalerweise die folgenden vier gültigen Attribute.

• Tag: Tag ist der Name eines Knotens, beispielsweise p, ul, li und div.
• Daten: Dieses Attribut enthält einige Daten zum Knoten, wie z. B. Attribute, Klasse und Stil.
• children: Liste der untergeordneten Knoten des aktuellen Knotens.
• Kontext: Dies ist die Vue.js-Instanz der aktuellen Komponente

Ein echter Elementknoten, der entsprechende V-Knoten ist wie folgt:

    // <p><span>Hallo</span><span>Welt</span></p>
    {
        Kinder: [VNode, VNode],
        Kontext: {...},
        Daten: {...},
        Tag: "p",
        ...
    }
 

5. Komponentenknoten

Komponentenknoten ähneln Elementknoten und haben die folgenden zwei einzigartigen Eigenschaften.

componentOptions: Optionsparameter des Komponentenknotens, der Informationen wie propsData, Tag und untergeordnete Elemente enthält
componentInstance: Eine Instanz einer Komponente, d. h. eine Instanz von Vue.js. Tatsächlich verfügt in Vue.js jede Komponente über eine Vue.js-Instanz.

Ein Komponentenknoten, der entsprechende Vnode, ist wie folgt:

    // <Kind></Kind>
    {
        Komponenteninstanz: {...},
        Komponentenoptionen: {...},
        Kontext: {...},
        Daten: {...},
        Tag: "vue-component-1-child",
        ...    
    }

6. Funktionaler Knoten

Funktionale Knoten ähneln Komponentenknoten. Sie haben zwei eindeutige Eigenschaften: functionalContext und functionalOptions.
Normalerweise sieht der Vnode eines Funktionsknotens folgendermaßen aus:

     {
        Funktionskontext: {...},
        Funktionsoptionen: {...},
        Kontext: {...},
        Daten: {...},
        tag: "div"
      }

Zusammenfassen

VNode ist eine Klasse, die verschiedene Typen von Vnode-Instanzen erzeugen kann. Verschiedene Typen von Instanzen repräsentieren verschiedene Typen von realem DOM.

Da Vue.js virtuelles DOM verwendet, um die Ansicht von Komponenten zu aktualisieren, muss bei einer Änderung der Attribute die gesamte Komponente neu gerendert werden, aber nicht alle DOM-Knoten in der Komponente müssen aktualisiert werden. Daher kann die Leistung erheblich verbessert werden, indem der Vnode zwischengespeichert und der neu generierte Vnode mit dem zwischengespeicherten Vnode verglichen wird und nur DOM-Operationen an den Teilen ausgeführt werden, die aktualisiert werden müssen.

Es gibt viele Arten von Vnodes, die im Wesentlichen aus Vnodes instantiierte Objekte sind. Der einzige Unterschied zwischen ihnen sind die Eigenschaften.

Dies ist das Ende dieses Artikels über die Verwendung von VNode in Vue.js. Weitere relevante Inhalte zur Verwendung von VNode 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!