Detaillierte Erklärung der wichtigsten Einzigartigkeit von v-for in Vue

1. DOM-Diff

Um die Bedeutung des Schlüsselattributs wirklich zu verstehen, müssen wir wirklich mit DOM Diff beginnen. Wir müssen die Prinzipien von DOM Diff nicht gründlich verstehen, sondern müssen nur den Arbeitsprozess von DOM Diff kennen.

Sowohl Vue als auch React verwenden virtuelles DOM, um unnötiges Browser-Rendering zu reduzieren. Da sowohl Vue als auch React die Methode v = render(m) zum Rendern der Ansicht verwenden, wird die Ansicht bei Änderungen der Modelldaten durch erneutes Rendern der DOM-Elemente aktualisiert. Aber manchmal ändern wir nur die Daten in einem Div in einer Komponente. Wenn wir natives Rendering verwenden, um die Ansicht zu aktualisieren, muss die gesamte Komponente aktualisiert werden. Ist das nicht Zeitverschwendung?

Wenn wir in unserem täglichen Leben auf solche Situationen stoßen, werden wir nicht alle Teile aktualisieren. Es ist, als wäre ein Puzzle fertig und später muss eines der kleinen Teile ersetzt werden. Wir finden einfach das Teil und ersetzen es direkt. Wir werden nie wieder von vorne beginnen. Die Entwickler von Vue und React denken genauso und versuchen jede mögliche Optimierung.

Unsere menschlichen Augen können den Unterschied zwischen vor und nach der Änderung auf einen Blick erkennen, daher müssen wir nur die Unterschiede aktualisieren. Für den Computer ist dies jedoch nicht auf einen Blick erkennbar; er muss die Daten von Anfang an schnell vergleichen, bis er die Unterschiede erkennt und sie aktualisiert. Der Vorgang des Vergleichens der Änderungen vor und nach der Änderung, um die Unterschiede zu ermitteln, wird als DOM Diff bezeichnet. Der DOM in DOM Diff ist ein virtueller DOM, also ein JavaScript-Objekt. Nach dem Vergleichen der einzelnen Änderungen, um die Unterschiede zu ermitteln, wird der reale DOM teilweise aktualisiert.

Während des Vergleichsvorgangs bildet der virtuelle DOM auch einen virtuellen DOM-Baum. Der Arbeitsprozess von DOM Diff besteht darin, die Objektknoten in den beiden virtuellen DOM-Bäumen zu vergleichen, insbesondere die entsprechenden Positionen jeder Ebene zu vergleichen. Da der Computer nur die beiden virtuellen DOM-Elemente an den entsprechenden Positionen jeder Ebene vergleicht, bleibt die Struktur des Baums unverändert, wenn in den beiden Bäumen nur ein Knoten in eine Ebene des geänderten Baums eingefügt wird, und DOM Diff führt beim Vergleich dieser Ebene zu einem falsch ausgerichteten Vergleich, wie in der folgenden Abbildung dargestellt:

Da die virtuellen DOM-Knoten auf dieser Ebene für Vue und React mit Ausnahme der DOM-Knoten selbst völlig identisch sind, kann DOM Diff beim Vergleich nur die entsprechenden Positionen einzeln vergleichen.

Wenn nach einem Eins-zu-eins-Vergleich der Knotentyp derselbe ist, wird der Knoten wiederverwendet und nur die unterschiedlichen Inhalte im Knoten werden teilweise aktualisiert. Wie in der obigen Abbildung gezeigt, wird, wenn dies der virtuelle DOM-Knoten von li unter ul ist, nach dem Vergleichen nacheinander und der Feststellung, dass die Knotentypen identisch sind, der vorherige Knoten wiederverwendet und der Inhalt im Knoten geändert, d. h. C wird auf F aktualisiert, D wird auf C aktualisiert, E wird auf D aktualisiert und schließlich wird E eingefügt.

Das Obige betrifft das Einfügen eines Knotens und die Folge ist eine Verringerung der Effizienz. Wenn jedoch ein Knoten gelöscht wird, ist die Folge nicht nur eine Verringerung der Effizienz.

Wenn Sie auf eine Schaltfläche klicken, um ein li-Element zu löschen, werden beim Vergleichen der neuen und alten virtuellen DOM-Bäume diese immer noch einzeln entsprechend der entsprechenden Positionen jeder Ebene im Baum verglichen. Beispielsweise wird [1,2,3] nach dem Löschen zu [1,3]. Das erste li wird mit dem zweiten li verglichen. Wenn festgestellt wird, dass sich der Elementtyp nicht geändert hat, wird das erste li erneut verwendet und dann das darin enthaltene li rekursiv verglichen. Wenn festgestellt wird, dass sich nichts geändert hat, wird es weiterhin wiederverwendet. Beim Vergleich der zweiten Li-Elemente wird festgestellt, dass es sich ebenfalls um Li-Elemente handelt. Daher wird das vorherige Li wiederverwendet und nur 2 in 3 geändert.

Wenn zu diesem Zeitpunkt in der wiederverwendeten LI Unterelemente vorhanden sind und sich die Daten, von denen die Unterelemente abhängen, nicht geändert haben, werden die vorherigen Unterkomponenten weiterhin wiederverwendet, was zu einer Fehlausrichtung führt, wie in der folgenden Abbildung dargestellt:

2. Fügen Sie Elementen desselben Typs auf derselben Ebene Schlüsselattribute hinzu

Im obigen DOM-Diff-Algorithmus werden nur die entsprechenden Positionen derselben Ebene der beiden Bäume verglichen. Es besteht keine Notwendigkeit, die Elemente zwischen verschiedenen Ebenen zu vergleichen. Wenn außerdem im DOM-Diff-Prozess festgestellt wird, dass der geänderte virtuelle DOM von einem anderen Typ als der vorherige virtuelle DOM ist, wird der vorherige deinstalliert und der geänderte Elementknoten wird erneut hinzugefügt. Daher tritt das oben genannte Problem auf, wenn die Knotentypen auf derselben Ebene in den beiden Bäumen identisch sind und das Hinzufügen oder Löschen der Ebene die Effizienz verringert oder Fehler verursacht.

Dies passiert, wenn wir in der v-for-Schleife den gleichen Typ von Beschriftungselementen generieren. Wenn wir nichts für den Beschriftungsknoten tun, besteht die Gefahr eines Fehlers. Was sollten wir also tun?

Die Antwort besteht darin, den Knoten desselben Knotentyps auf derselben Ebene einen eindeutigen Schlüsselwert hinzuzufügen. Auf diese Weise werden beim paarweisen Vergleich durch DOM Diff die beiden virtuellen DOMs mit demselben Schlüssel verglichen, anstatt sie nur entsprechend der entsprechenden Positionen zu vergleichen.

Dadurch werden falsch ausgerichtete Vergleiche vermieden, die Vergleichseffizienz erheblich verbessert und Fehlerrisiken beseitigt.

3. Der Schlüssel kann kein Indexindexwert sein

Da der Indexwert eines Arrays oder Objekts eindeutig ist, verwenden wir den Index häufig als Wert des Schlüsselattributs. Manche Leute sagen, dass dies in Ordnung ist und die Leistung optimiert oder so etwas bringt, aber die Verwendung des Indexwerts birgt ein großes Fehlerrisiko.

Diese Fehler treten auf, wenn Objekte oder Elemente in Ihrer v-for-Schleife hinzugefügt, entfernt oder ihre Reihenfolge geändert wird.

Warum können wir also keinen Indexindex verwenden?

Tatsächlich liegt es daran, dass der Indexindex verwendet und nicht verwendet wird. Denn beim Hinzufügen und Löschen ändert sich der Index eines bestimmten Elements. Wenn beispielsweise [1,2,3] zu [1,3] wird, ist der ursprüngliche Index, der den Daten 3 entspricht, 2, und nach dem Löschen wird der Index der Daten 3 zu 1. Wenn DOM Diff ausgeführt wird, werden paarweise Vergleiche basierend auf gleichen Schlüsselwerten durchgeführt. Die Knoten, die den Daten 3 entsprechen, entsprechen immer noch nicht einander. Daher hat die Verwendung des Index als Schlüssel denselben Effekt, als würde man den Schlüssel nicht festlegen.

Aus diesem Grund sollten Sie den Index nicht als Schlüssel verwenden.

Deshalb: Der Schlüsselattributwert muss eindeutig sein und ändert sich nicht

Oben finden Sie eine ausführliche Erläuterung der Schlüsseleinzigartigkeit von v-for in vue. Weitere Informationen zur Schlüsseleinzigartigkeit von v-for in vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!