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
So führen Sie einen Befehl zu einem bestimmten Zeitpunkt in Linux aus
Neulich habe ich rsync verwendet, um eine große D...
MySQL-Implementierung für pessimistisches und optimistisches Sperren
Inhaltsverzeichnis Vorwort Tatsächlicher Kampf 1....
So verwenden Sie die Vue-Cache-Funktion
Inhaltsverzeichnis Cache-Funktion in vue2 Transfo...
Unverzichtbar für die Frontend-Entwicklung: 12 empfohlene Tools zum Testen der Browserkompatibilität
Für Frontend-Entwickler ist es eine zeitaufwändig...
So verhindern Sie, dass Iframes in HTML zur Seite springen, und verwenden Iframes, um die WeChat-Webversion in die Seite einzubetten
Ich möchte nur eine kleine Sache machen, die Winf...
Lichtschalter mit js steuern
Verwenden Sie js, um den Lichtschalter zu Ihrer R...
So stellen Sie die MySQL5.7-Kodierung auf utf8mb4 ein
Ich bin vor kurzem auf ein Problem gestoßen. Die ...
Detaillierte Erklärung, wie Sie den Speicherort der Nginx-Konfigurationsdatei finden
Wie lässt sich bei einem unbekannten Server oder ...
HTML-Tutorial: Sammlung häufig verwendeter HTML-Tags (6)
Verwandte Artikel: Anfänger lernen einige HTML-Ta...
Analyse und Lösung der Gründe, warum HTML-externe Referenz-CSS-Dateien nicht effektiv sind
Als Frontend-Neuling habe ich einige Tage am Front...
So verwenden Sie Zeit als Beurteilungsbedingung in MySQL
Hintergrund: Während des Entwicklungsprozesses mü...
Über den Unterschied zwischen js typeof und instanceof bei der Beurteilung von Datentypen und deren Entwicklung und Verwendung
Inhaltsverzeichnis 1. Typ des Operators 2. Instan...
So positionieren Sie die Kopfzeile mithilfe des CSS-Sticky-Layouts oben
Anwendungsszenarien: Eine der neuen Anforderungen...
Shell-Skript Nginx-Automatisierungsskript
Dieses Skript kann die Vorgänge zum Starten, Stop...
So importieren Sie Vue-Komponenten automatisch bei Bedarf
Inhaltsverzeichnis Globale Registrierung Teilregi...