Detaillierte Erklärung von :key in VUE v-for
|
Wenn der Schlüssel nicht zum v-for-Tag hinzugefügt wird.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<script src="../../js/vue.js"></script>
<title>Über den v-for-Schlüssel</title>
</Kopf>
<Text>
<div id="app">
<div>
<Eingabetyp="Text" v-Modell="Name">
<button @click="add">Hinzufügen</button>
</div>
<ul>
<li v-for="(Element, Index) in Liste">
<input type="checkbox"> {{item.name}}
</li>
</ul>
</div>
<Skripttyp="text/javascript">
const app = new Vue({
el: '#app',
Daten() {
zurückkehren {
Name: '',
neue ID: 3,
Liste: [
{ id: 1, name: 'Name' },
{ ID: 2, Name: 'Li Si' },
{ ID: 3, Name: "Kleinkind" }
],
};
},
berechnet: {
},
Methoden: {
hinzufügen() {
//Beachten Sie, dass dies eine Verschiebung ist
diese.Liste.unshift({ id: ++this.newId, name: this.name })
dieser.name = ''
}
},
});
</Skript>
<Stilbereich>
</Stil>
</body>
</html>
Nachdem wir Li Si ausgewählt und Zhao Liu hinzugefügt hatten, wurde die ausgewählte Person Zhang San.
Schauen wir uns den Fall an, in dem v-for einen Schlüssel hat:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<script src="../../js/vue.js"></script>
<title>Über den v-for-Schlüssel</title>
</Kopf>
<Text>
<div id="app">
<div>
<Eingabetyp="Text" v-Modell="Name">
<button @click="add">Hinzufügen</button>
</div>
<ul>
<li v-for="(Artikel, Index) in Liste" :key="Artikel.id">
<input type="checkbox"> {{item.name}}
</li>
</ul>
</div>
<Skripttyp="text/javascript">
const app = new Vue({
el: '#app',
Daten() {
zurückkehren {
Name: '',
neue ID: 3,
Liste: [
{ id: 1, name: 'Name' },
{ ID: 2, Name: 'Li Si' },
{ ID: 3, Name: "Kleinkind" }
],
};
},
berechnet: {
},
Methoden: {
hinzufügen() {
//Beachten Sie, dass dies eine Verschiebung ist
diese.Liste.unshift({ id: ++this.newId, name: this.name })
dieser.name = ''
}
},
});
</Skript>
<Stilbereich>
</Stil>
</body>
</html>
Nachdem wir Li Si ausgewählt und Zhao Liu hinzugefügt haben, ist die ausgewählte Person immer noch Li Si, es gibt keine Änderung. Dies liegt am Diff-Algorithmus unten in Vue. Die Verarbeitungsmethode des Diff-Algorithmus besteht darin, die Knoten auf derselben Ebene des DOM-Baums vor und nach der Operation Schicht für Schicht zu vergleichen, wie in der folgenden Abbildung dargestellt:
Wenn eine Ebene viele identische Knoten enthält, also Listenknoten, folgt der Aktualisierungsprozess des Diff-Algorithmus standardmäßig auch den oben genannten Prinzipien. Nehmen wir zum Beispiel diese Situation:
Wir hoffen, zwischen B und C ein F hinzufügen zu können. Die Standardimplementierung des Diff-Algorithmus lautet wie folgt:
Das heißt, aktualisieren Sie C auf F, D auf C, E auf D und fügen Sie schließlich E ein. Ist das nicht ineffizient? Daher müssen wir einen Schlüssel verwenden, um jeden Knoten eindeutig zu identifizieren, damit der Diff-Algorithmus den Knoten korrekt identifizieren und die richtige Position zum Einfügen des neuen Knotens finden kann.
Die Listenschleife in Vue muss Folgendes hinzufügen: Schlüssel = „eindeutige Kennung“. Die eindeutige Kennung kann der ID-Index im Element usw. sein. Da Vue-Komponenten häufig wiederverwendet werden, kann das Hinzufügen eines Schlüssels die Eindeutigkeit der Komponente identifizieren. Um jede Komponente besser unterscheiden zu können, besteht die Hauptfunktion des Schlüssels darin, den virtuellen DOM effizient zu aktualisieren. ZusammenfassenDieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können! Das könnte Sie auch interessieren:
|
<<: Die Größe der transparenten HTML-Popup-Ebeneninstanz kann eingestellt und proportional sein.
>>: Ubuntu-Installations-Grafiktreiber und CUDA-Tutorial
Artikel empfehlen
Detailliertes Installationstutorial für MySQL 5.7 unter CentOS 6 und 7
Für die Entwicklung benötigen Sie immer Daten. Al...
Der Lösungsdatensatz für Vue, der das Element beim ersten Mal nicht abrufen konnte
Vorwort Die Lösung für das Problem, dass Elemente...
So erstellen Sie Ihre erste React-Seite
Inhaltsverzeichnis Was ist Rract? Hintergrund Rea...
So installieren Sie Docker unter Windows Server 2016
Kürzlich hat Microsoft Windows Server 2016 veröff...
Lösen Sie das Problem, dass bei Verwendung von GDB in Docker keine Haltepunkte eingegeben werden können
Frage Beim Ausführen von gdb im Docker wird ein H...
Detaillierte Erklärung der MySQL-Instanz mit aktiviertem SSD-Speicher
Detaillierte Erklärung der MySQL-Instanz mit akti...
Eine kurze Diskussion über das Blockieren von CSS-Zusammenführungen und andere Auswirkungen
Nichtorthogonale Ränder Wenn ein Rand verwendet w...
Die häufigsten Fehler beim Schreiben von HTML-Tags
Wir sollten besser aufpassen, denn die HTML-Poliz...
Detaillierte Erklärung des Loop-Formularelementbeispiels in Vue
Manchmal stoßen wir auf eine solche Anforderung, ...
So konvertieren Sie MySQL horizontal in vertikal und vertikal in horizontal
Daten initialisieren Tabelle löschen, wenn `test_...
CentOS7-Installations-GUI-Schnittstelle und Implementierung der Remote-Verbindung
Verwenden Sie zum Crawlen von Daten die browserba...
Beispiel für die Verwendung des Swiper-Plugins zur Implementierung eines Karussells in Vue
Inhaltsverzeichnis vue - Verwenden Sie das Swiper...
Detailliertes Tutorial zum Einrichten mehrerer Instanzen von MySQL 8 auf CentOS 7 (Sie können so viele haben, wie Sie möchten)
Ursache Ich habe vor Kurzem mit der Umstrukturier...
Detaillierte Erklärung des Overlay-Netzwerks in Docker
Übersetzt aus der offiziellen Docker-Dokumentatio...
Tipps zum Anzeigen von Verlaufsdatensätzen und Hinzufügen von Zeitstempeln in Linux
Tipps zum Anzeigen von Verlaufsdatensätzen und Hi...