Detaillierte Erklärung der Rolle und des Prinzips des Schlüssels in Vue

Inhaltsverzeichnis

1. Beginnen wir mit dem Fazit
2. Die Rolle des Schlüssels

2.1 Ein Beispiel
2.2 Ändern Sie das obige Beispiel
2.3 Das Beispiel nochmals anpassen

3. Umsetzungsprinzip des Schlüssels

1. Wenn der Schlüssel ein Index ist.
2. Wenn der Schlüssel die ID ist.

Zusammenfassen

1. Beginnen wir mit dem Fazit

Der Schlüssel in Vue ist die Kennung des DOM-Objekts;
Beim Anzeigen einer Liste ist der Standardschlüssel der Index.
Wenn die Daten nur zur Anzeige verwendet werden, ist es kein Problem, den Index als Schlüssel zu verwenden.
Wenn Sie einen Index als Schlüssel verwenden und nachfolgende Vorgänge die Reihenfolge zerstören, führt dies definitiv zu Effizienzproblemen und in schwerwiegenden Fällen zu einem falschen DOM.

Lassen Sie uns die Rolle und das Implementierungsprinzip des Schlüssels nacheinander besprechen.

2. Die Rolle des Schlüssels

Schlüssel ist ein in Vue verwendeter Bezeichner. Genauer gesagt wird der Schlüssel im virtuellen DOM in Vue verwendet und erscheint nicht im realen DOM.

2.1 Ein Beispiel

Zeigt eine Gruppe von Personalinformationen in einem Listenformat an.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Das Schlüsselprinzip</title>

    <!--Vue vorstellen-->
    <script type="text/javascript" src="../js/vue.js"></script>
    
</Kopf>
<div id="Wurzel">
    <h2>Mitarbeiterliste</h2>
    <ul>
        <li v-for="(p,index) in Personen">
            {{p.name}}-{{p.age}}
        </li>
    </ul>
</div>
<Text>
    <Skripttyp="text/javascript">
        const vm = neuer Vue({
            el:'#Wurzel',
            Daten:{
                Personen:
                    {'id':'001', 'name':'Name', 'age':'18'},
                    {'id':'002', 'name':'Li Si', 'alter':'19'},
                    {'id':'003', 'name':'Wang Wu', 'alter':'20'}
                ]
            }
        })
    </Skript>
</body>
</html>

Diese HTML-Datei wird wie unten gezeigt im Browser geöffnet.

Bild-20211011224230413

Die obige Beispiel-HTML-Datei verwendet keinen Schlüssel und es scheint kein Problem zu geben. Natürlich gibt es kein Problem, wenn Sie die Daten einfach anzeigen, ohne den Schlüssel zu schreiben.

Fügen wir nun dem obigen Beispiel einen Schlüssel hinzu. Hier wird die ID jedes Datensatzes als Schlüssel verwendet.

<li v-for="(p,index) in Personen" :key="p.id">
    {{p.name}}-{{p.age}}
</li>

Das Anzeigeergebnis nach dem Hinzufügen des Schlüssels ist exakt dasselbe wie das Ergebnis im obigen Bild.

Bild-20211011224928540

Wenn wir das Element in einem Browser anzeigen, wird der Schlüssel nicht angezeigt.

Bild-20211011225246624

Bisher können wir zwei Schlussfolgerungen ziehen: 1. Es wird nur zur Datenanzeige verwendet, und das Nichtschreiben des Schlüssels hat keine Auswirkungen. 2. Der Schlüssel wird nicht im realen DOM angezeigt

Selbst wenn Sie keinen Schlüssel schreiben, verwendet Vue den Schlüssel auch beim Generieren des echten DOM. Der Standardwert ist der Datenindex (Index).

Wir ersetzen den Schlüssel durch den Index und die angezeigten Daten ändern sich nicht.

<li v-for="(p,index) in Personen" :key="index">
	{{p.name}}-{{p.age}}
</li>

2.2 Ändern Sie das obige Beispiel

Zeigen Sie den Index basierend auf den Personalinformationen an und fügen Sie eine Schaltfläche hinzu, um die Personalinformationen zur Kopfzeile hinzuzufügen

Ändern Sie die obige HTML-Datei leicht.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Das Schlüsselprinzip</title>

    <!--Vue vorstellen-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <link rel="Symbol" href="../favicon.ico" Typ="Bild/x-Symbol" />

</Kopf>
<div id="Wurzel">
    <h2>Mitarbeiterliste</h2>
    <button @click="add">Einen Lao Liu hinzufügen</button>
    <ul>
        <li v-for="(p,index) in Personen" :key="index">
            {{p.name}}-{{p.age}}-{{index}}
        </li>
    </ul>
</div>
<Text>
    <Skripttyp="text/javascript">
        const vm = neuer Vue({
            el:'#Wurzel',
            Daten:{
                Personen:
                    {'id':'001', 'name':'Name', 'age':'18'},
                    {'id':'002', 'name':'Li Si', 'alter':'19'},
                    {'id':'003', 'name':'Wang Wu', 'alter':'20'}
                ]
            },
            Methoden:{
                hinzufügen(){
                    const p = {'id':'004', 'name':'Alter', 'age':'40'}
                    diese.personen.unshift(p)
                }
            }
        })
    </Skript>
</body>
</html>

Wir können sehen, dass die Indizes von Zhang San, Li Si und Wang Wu jeweils 0, 1 und 2 sind.

Bild-20211011230442273

Klicken Sie auf die Schaltfläche, um ein neues Zeichen hinzuzufügen. Der Index ändert sich zu diesem Zeitpunkt. Das neu hinzugefügte Zeichen „Lao Liu“ erhält den Index 0. Das scheint richtig, aber auch falsch zu sein.

Bild-20211011230815984

Natürlich ist es nicht falsch, einfach über Indizes zu diskutieren. Lassen Sie uns anhand eines neuen Beispiels erklären, was falsch ist.

2.3 Das Beispiel nochmals anpassen

Anstatt den Index anzuzeigen, zeigen Sie ein Eingabefeld an. Schreiben Sie den Nachnamen jeder Person in das Eingabefeld dahinter und beobachten Sie die Änderungen in den Originaldaten, nachdem die neuen Daten eingefügt wurden.

Ändern Sie das HTML leicht

<li v-for="(p,index) in Personen" :key="index">
    {{p.name}}-{{p.age}}
    <Eingabetyp="Text">
</li>

Der tatsächliche Effekt ist wie unten dargestellt

Bild-20211011231349758

An diesem Punkt scheint alles in Ordnung zu sein. Als Nächstes ist der Moment gekommen, Zeuge eines Wunders zu werden.

Als wir Lao Liu hinzufügten, ging etwas schief, was anders war als erwartet.

Bild-20211011231548484

Dies ist der Fall, wenn der Schlüssel ein Index ist. Wenn er in eine eindeutige Kennung für die Daten geändert wird, tritt dieses Problem nicht auf.

<li v-for="(p,index) in Personen" :key="p.id">
    {{p.name}}-{{p.age}}
    <Eingabetyp="Text">
</li>

Hey, das ist es, was wir wollen.

Bild-20211011231848647

Wenn die Liste Eingaben enthält, zerstören nachfolgende Vorgänge die ursprüngliche Reihenfolge, was zu einem DOM-Fehler führt

3. Umsetzungsprinzip des Schlüssels

Um das Implementierungsprinzip des Schlüssels zu erklären, müssen wir ein sehr wichtiges Konzept von Vue vorstellen – [Virtual DOM].

Bei einem gegebenen Datensatz muss Vue diese Daten auf der Seite rendern. Zuerst muss es einen [virtuellen DOM] generieren und dann basierend auf dem [virtuellen DOM] einen [realen DOM] generieren. Wenn sich die Daten ändern, generiert Vue einen [neuen virtuellen DOM]. Beachten Sie, dass dieser [neue virtuelle DOM] nicht direkt einen [neuen realen DOM] generiert, da der virtuelle DOM sonst nutzlos wäre. Was Vue macht, ist, den auf Grundlage der neuen Daten generierten [neuen virtuellen DOM] mit dem vorherigen [realen DOM] zu vergleichen. Wenn sie gleich sind, können sie direkt verwendet werden („nimm es, wie es ist“); wenn sie unterschiedlich sind, wird ein neues DOM-Objekt generiert.

In diesem Prozess spielt der Schlüssel eine sehr wichtige Rolle.

Lassen Sie uns es anhand des letzten Beispiels analysieren.

1. Wenn der Schlüssel ein Index ist.

Der Prozess zum Generieren von [realem DOM] basierend auf Daten läuft wie folgt ab: (Beachten Sie, dass der Inhalt im Eingabefeld im realen DOM in der folgenden Abbildung nach der Seitengenerierung manuell hinzugefügt wird.)