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
Prozessanalyse der Bereitstellung von ASP.NET Core-Anwendungen auf dem Linux-System Docker
Inhaltsverzeichnis 1. Systemumgebung 2. Betriebsa...
Verwenden Sie in JS nicht mehr überall Operatoren für absolute Gleichheit.
Inhaltsverzeichnis Überblick 1. Test auf Nullwert...
So fragen Sie dieselbe Tabelle in einer MySQL-Datenbank gleichzeitig ab und aktualisieren sie
In gewöhnlichen Projekten stoße ich häufig auf di...
Implementierung von Add-, Delete-, Modification- und Query-Operationen in MySQL basierend auf sqlalchemy
Bedarfsszenario: Der Chef bat mich, den Crawler z...
Drei Prinzipien effizienten Navigationsdesigns, die Webdesigner kennen müssen
Das Entwerfen der Navigation für eine Website ist...
So lösen Sie das jQuery-Konfliktproblem
In der Frontend-Entwicklung ist $ eine Funktion i...
Erläuterung der MySQL-Transaktionsauswahl für die Aktualisierung und Datenkonsistenzverarbeitung
Transaktionen in MySQL werden standardmäßig autom...
Einführung in das Batch-Cache-Löschskript von nginx proxy_cache
Vorwort: Ich habe zuvor den offiziellen Proxy-Cac...
Realisierung von Provinz- und Gemeindeverknüpfungseffekten auf Basis von JavaScript
In diesem Artikel wird der spezifische JavaScript...
Lösen Sie das Problem der verstümmelten Zeichen im Tomcat10 Catalina-Protokoll
Laufumgebung, Idea2020-Version, Tomcat10, beim Au...
Vue implementiert Benutzeranmeldung und Token-Verifizierung
Im Falle einer vollständigen Trennung von Front-E...
Ein Beispiel für die Verwendung eines Lvs+Nginx-Clusters zum Erstellen einer Architektur mit hoher Parallelität
Inhaltsverzeichnis 1. Lvs-Einführung 2. Lvs-Lasta...
MySQL-Datenbankgrundlagen: Eine Zusammenfassung der grundlegenden Befehle
Inhaltsverzeichnis 1. Hilfeinformationen nutzen 2...
Ein praktischer Bericht über einen durch den MySQL-Start verursachten Unfall
Inhaltsverzeichnis Hintergrund So ermitteln Sie, ...
Schritte zum Aktivieren des MySQL-Datenbanküberwachungs-Binlogs
Vorwort Wir müssen häufig etwas basierend auf bes...