Eine kurze Erläuterung der Rolle und Funktionsweise von Schlüsseln in Vue3

Welche Funktion hat dieses Schlüsselattribut? Schauen wir uns zunächst die offizielle Erklärung an:

• Das Kekey-Attribut wird hauptsächlich im virtuellen DOM-Diff-Algorithmus von Vue verwendet, um Vnodes beim Vergleich neuer und alter Knoten zu identifizieren.
• Wenn Sie keine Schlüssel verwenden, nutzt Vue einen Algorithmus, der dynamische Elemente minimiert und versucht, Elemente desselben Typs möglichst oft an Ort und Stelle zu ändern/wiederzuverwenden.
• Bei Verwendung eines Schlüssels wird die Reihenfolge der Elemente basierend auf der Schlüsseländerung neu angeordnet und die Elemente, die im Schlüssel nicht vorhanden sind, werden entfernt/zerstört.
  

Lassen Sie mich kurz mein Verständnis von VNode erwähnen:

• Der vollständige Name von VNode ist „Virtual Node“, also ein virtueller Knoten.
• Das Wesentliche von Vnode ist ein JavaScript-Objekt;
• Tatsächlich werden in Vue sowohl Komponenten als auch einzelne Elemente als VNodes dargestellt.

Zum Beispiel:

<div class="title" style="color: red;">Hallo Welt</div>
// Tatsächlich wird es in Vue so dargestellt:
const VNode = {
    Typ: "div",
    Requisiten: {
        Klasse: "Titel",
        Stil: {
            Farbe: "rot"        
        }    
    },
    children: "Hallo Welt" // Wenn das Div andere Tags enthält, werden diese auf die gleiche Weise in untergeordnete Elemente umgewandelt}

Unter welchen Umständen ist das Einfügen von f am effizientesten?

Ideen:

• Einmal erneut rendern (verbraucht viel Leistung)
• Der vorherige VNode bleibt unverändert und wird von der Einfügeposition aus neu gerendert (was einen hohen Leistungsverbrauch verursacht).
• Alle VNnodes werden neu gerendert, nur die neu hinzugefügten VNodes müssen eingefügt werden (beste Leistung)

Fazit: Wenn Sie die höchste Leistung wünschen, müssen Sie die neuen und alten VNodes schlüsseln, die alten VNodes mit den neuen VNodes nach Schlüsselwert vergleichen und herausfinden, welche VNodes hinzugefügt oder gelöscht werden müssen. Andere VNodes sollten so weit wie möglich unverändert bleiben. Der Prozess des Vergleichens der neuen und alten VNodes ist der Diff-Algorithmus.

Vue ruft tatsächlich zwei verschiedene Methoden für Schlüssel und keine Schlüssel auf. Werfen wir einen Blick auf den Quellcode: (packages\runtime-core\src\renderer)

Führen Sie im Falle eines Schlüssels die Methode patchKeyedChildren aus:

Wenn kein Schlüsselwert vorhanden ist, führen Sie die Methode patchUnkeyedChildren aus:

Hinweis: Wenn kein Schlüsselwert vorhanden ist und zu viele Listen vorhanden sind, werden Patches einzeln ausgeführt, was viel Leistung verbraucht. Durch das Hinzufügen des Schlüsselwerts wird dann ein großer Leistungsverlust vermieden.

abschließend:

Daher spielt der Schlüsselwert eine Rolle, wenn der DOM-Baum den Diff-Algorithmus ausführt. Eine Funktion besteht darin, festzustellen, ob die neuen und alten Vnodes gleich sind, um den nächsten Schritt des Vergleichens und Renderns auszuführen. Die andere Funktion besteht darin, festzustellen, ob die Komponente wiederverwendet werden kann und ob sie erneut gerendert werden muss.

Dies ist das Ende dieses Artikels über die Rolle und das Funktionsprinzip von Schlüsseln in Vue3. Weitere Informationen zur Rolle und dem Funktionsprinzip von Schlüsseln in Vue3 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!