Detaillierte Erklärung des Prinzips und der Funktion des Vue-Listen-Rendering-Schlüssels

Das Prinzip und die Funktion des Listen-Rendering-Schlüssels

Der Schlüssel dient zur Identifizierung des Knotens. Wenn der Schlüssel an den Wert des Index gebunden ist, können leicht Probleme auftreten:

1. Wenn die Daten in umgekehrter Reihenfolge hinzugefügt oder gelöscht werden, treten unnötige echte DOM-Aktualisierungen auf. Der Seiteneffekt ist in Ordnung, aber die Effizienz ist 2 Probleme.

2. Wenn die Dekonstruktion auch das DOM der Eingabeklasse umfasst, erfolgt ein falsches DOM-Update - es liegt ein Problem mit der Schnittstelle vor

Fallanalyse des Problems:

Klicken Sie auf die Schaltfläche, um ein Objekt an den Anfang der Liste hinzuzufügen

    <div id="Wurzel">
        <button @click.once="add">Einen Lao Liu hinzufügen</button>
        <ul>
            <li v-for="(p, index) in Personen" :key="index">
                {{p.name}}---{{p.age}}
                <Eingabetyp="Text">
            </li>
        </ul>
    </div>

        var vm = neuer Vue({
            el:"#Wurzel",
            Daten:{
                Personen:
                    {id:"001", name:"张三", age:15},
                    {id:"002", Name:"Li Si", Alter:16},
                    {id:"003", Name:"王五", Alter:17}
                ]
            },
            Methoden: {
                hinzufügen(){
                    const p = {id:"004", name:"Kleinanzeigen", age:20}
                    diese.personen.unshift(p)
                }
            },
        })

Dies ist der gezeigte Effekt

Wenn wir den Namen in das Eingabefeld eintragen

Klicken Sie dann auf die Schaltfläche und beobachten Sie das Problem

Wir werden feststellen, dass „Lao Liu“ oben im Formular angezeigt wird, der Inhalt der Liste jedoch nicht mit dem Inhalt im Eingabefeld übereinstimmt.

Lösung: Wir key="index"改為:key="id"

Analyse des Schlüsselprinzips

Ausgangsdaten

Holen Sie sich die Anfangsdaten und generieren Sie einen virtuellen DOM basierend auf den Anfangsdaten. Konvertieren Sie den virtuellen DOM in einen realen DOM

Neue Daten

Holen Sie sich die neuen Daten (einschließlich Lao Liu) und generieren Sie basierend auf den Daten einen virtuellen DOM. Vergleichen Sie den virtuellen DOM mit dem virtuellen DOM der ursprünglichen Daten (die Textinformationen in li sind unterschiedlich, aber die Eingabe ist dieselbe. Der virtuelle DOM enthält keine Daten. Der auf der Seite eingegebene Inhalt wird im realen DOM gespeichert.) Textinformationen - die neuen Daten ersetzen die ursprünglichen Daten und der eingegebene Inhalt bleibt erhalten

Die Rolle des Schlüssels

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!