Vorwort:
Wenn Sie v-for in vue verwenden, müssen Sie im Allgemeinen einen Schlüssel hinzufügen, um seine Eindeutigkeit anzuzeigen. Warum müssen wir diesen Schlüssel dann hinzufügen? Lassen Sie uns hier darüber sprechen
Verwendung von v-for:
<ul>
<li v-for='(item,index) in arr' :key='"demo"+index'>{
{item}}<li>
</ul>
data里面定义：
arr:[]可以简单的这样理解：加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果
Ich habe die relevanten Dokumente überprüft und die Legende ist sehr klar.
Der Diff-Algorithmus des virtuellen DOM von vue und react ist ungefähr derselbe. Sein Kern basiert auf zwei einfachen Annahmen. Lassen Sie uns zunächst
über die Verarbeitungsmethode des diff-Algorithmus sprechen. Vergleichen Sie die Knoten derselben Schicht des Dom-Baums zuvor und nach der Operation. Bild:
before.png
Wenn eine Ebene viele identische Knoten enthält, dh Knoten auflistet, folgt der Aktualisierungsprozess des Diff-Algorithmus standardmäßig auch den oben genannten Prinzipien.
Zum Beispiel diese Situation:
3297464-ee627869a6714336.jpg
Wir hoffen, dass wir ein F zwischen B und C hinzufügen können. Der Diff-Algorithmus wird standardmäßig wie folgt ausgeführt:
3297464-d912523aac5fd108.jpg
Aktualisieren Sie also C auf F, D auf C, E auf D und fügen Sie schließlich E ein. Ist es sehr ineffizient?
Wir müssen also den Schlüssel verwenden, um eine eindeutige Identifikation für jeden Knoten zu erstellen. Der Diff-Algorithmus kann diesen Knoten korrekt identifizieren und den richtigen Positionsbereich zum Einfügen eines neuen Knotens finden.
3297464-650689b4bd4b9eb6.jpg
Die Listenschleife in vue muss Folgendes hinzufügen: key = "eindeutiger Bezeichner" Der eindeutige Bezeichner kann der ID-Index im Element usw. sein, da die vue-Komponente häufig wiederverwendet wird und der Schlüssel die Eindeutigkeit der Komponente identifizieren kann Zur besseren Unterscheidung der einzelnen Komponenten besteht die Schlüsselfunktion hauptsächlich darin, das virtuelle DOM effizient zu aktualisieren