Anwendungsbeispiel-Tutorial zum Schlüssel-Rendering in Vue

Einführung

Während des Front-End-Projektentwicklungsprozesses werden die von el-table angezeigten Ergebnisspalten in Form von Komponenten eingeführt. Einige Felder werden mit der Methode :formatter transkodiert, und die Steuerung zum Anzeigen/Ausblenden von Feldern der Ergebnisspalte wird ebenfalls in Form von Komponenten eingeführt. Wenn das Front-End die Eigenschaften der Feldanzeige steuert, wird festgestellt, dass es Probleme mit der Codewertkonvertierung und der Anzeige von Feldinformationen gibt.

Problemanalyse

Beim Lesen der Codestruktur stellen wir fest, dass el-table-column durch eine Vorlagenschleife generiert wird. Da die Vorlage ein Vorlagenplatzhalter ist, kann sie uns beim Umschließen von Elementen helfen, aber während der Schleife wird die Vorlage nicht auf der Seite gerendert. Die Rolle des Schlüssels bei der Darstellung von Tabellendaten ist wie folgt:

• Der Schlüssel ist der Identifikationswert eines DOM-Knotens. In Kombination mit dem Diff-Algorithmus kann der Knoten wiederverwendet werden. (Knoten mit demselben Schlüssel werden wiederverwendet);
• Nur wenn sich der Schlüssel (oder andere Dinge, die dazu führen, dass isSameNode falsch ist) ändert, wird der Knoten neu gerendert. Andernfalls verwendet Vue den vorherigen Knoten erneut und aktualisiert den Knoten, indem es die Eigenschaften des Knotens ändert.

Gleichzeitig unterstützt das Vorlagentag das :key-Attribut nicht.

Hinweis: Das Vorlagentag innerhalb des an die Vue-Instanz gebundenen Elements unterstützt die v-show-Direktive nicht, d. h. v-show="false" funktioniert für das Vorlagentag nicht. Das Vorlagentag unterstützt jetzt jedoch die Anweisungen v-if, v-else-if, v-else und v-for.

Problemumgehung

Da das Vorlagen-Tag das Schlüsselattribut nicht unterstützt, können Sie dem el-table-column-Tag das Attribut key="Math.random()" hinzufügen. Dieses Schlüsselattribut ist ein spezielles Attribut von Vue, das hauptsächlich im virtuellen DOM-Algorithmus von Vue verwendet wird, um VNodes beim Vergleich neuer und alter Knoten zu identifizieren und so die Leistung beim Rendern von Seiten zu verbessern. Wenn dieser Schlüssel nicht aktualisiert wird, werden Teile des DOM beim Anzeigen/Ausblenden von Spalten nicht erneut gerendert, was bei Änderungen in der Tabelle zu Verwirrung führen kann.

Weiterführende Literatur

1. Die Rolle des Schlüssels

Wie oben erwähnt, kann der Knoten als Identifikationswert eines DOM-Knotens in Kombination mit dem Diff-Algorithmus wiederverwendet werden. (Knoten mit demselben Schlüssel werden wiederverwendet.)

Nur wenn sich der Schlüssel (oder andere Dinge, die dazu führen, dass isSameNode falsch ist) ändert, wird der Knoten neu gerendert. Andernfalls verwendet Vue den vorherigen Knoten erneut und aktualisiert den Knoten, indem es die Eigenschaften des Knotens ändert. Was ist also der Unterschied zwischen der Verwendung von ID und Index als Schlüssel?

2. Der Unterschied zwischen der Verwendung von ID und Index für den Schlüssel

Es wird nicht empfohlen, den Index als Schlüssel zu verwenden, da dies dazu führen würde, dass einige Knoten an Ort und Stelle falsch wiederverwendet werden, und zwar wie folgt:

• Leistungsverlust: Beim Rendern der Liste werden alle Listenknoten (Inhalte) nach dem geänderten Element aktualisiert (entspricht dem nicht funktionierenden Schlüssel).
• Ein Fehler ist aufgetreten: Einige Knoten wurden an der falschen Stelle wiederverwendet. (Zum Beispiel, wenn in einem Listenelement ein Kontrollkästchen verwendet wird)

Leistungsverlust

Beim Rendern der Liste werden alle Listenknoten (Inhalte) nach dem geänderten Element aktualisiert (entspricht dem nicht funktionierenden Schlüssel).

Es ist zu beachten, dass die Aktualisierung aller Listenknoten nach der Elementänderung im Wesentlichen eine Aktualisierung der Knotenattribute darstellt und die Knoten selbst wiederverwendet werden.

<!-- Testcode -->
<Vorlage>
 <div>
 <div v-for="(item, index) in arr" :key="index oder item.id">
  {{item.data}}
 </div>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Name: "Hallo Welt",
 Daten(){
 zurückkehren {
  arr: Array.from({Länge: 10000}, (v, i) => {return {id: i, data: i}})
 }
 },
 montiert(){
 setzeTimeout(()=>{
  /* 
  1. this.shiftArr() // lösche das erste Element oder 2. this.unShiftArr() // füge ein neues Element am Anfang ein */
 }, 1000)
 },
 Methoden: {
 shiftArr(){
  dies.arr.shift();
 },
 unshiftArr(){
  dies.arr.unshift({id: -1, data: -1});
 }
 }
}
</Skript>

Das obige Beispiel ist sehr einfach. v-for rendert eine Liste mit einer Länge von 10.000 Zeichen. Nachdem Vue eine Sekunde lang gemountet war, führt es eine Löschung des ersten Elements in der Liste oder eine Einfügung eines neuen Elements in den Listenkopf aus und beachtet den spezifischen Seitenaktualisierungsaufwand der beiden Tastenkombinationen.

Der Seiten-Overhead wird mithilfe der Registerkarte „Leistung“ von Chrome gemessen.

Löschen Sie das erste Element in der Liste

Den Listenanfang zum neuen Element verschieben

Ein Fehler ist aufgetreten

Einige Knoten werden an der falschen Stelle wiederverwendet. (Zum Beispiel, wenn in einem Listenelement ein Kontrollkästchen verwendet wird)

<!-- Testcode -->
<Vorlage>
 <div>
 <button @click="test">Erstes Element in der Liste löschen</button>
 <div v-for="(item, index) in arr" :key="index oder item.id">
  <Eingabetyp="Kontrollkästchen" />
  {{item.data}}
 </div>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Name: "Hallo Welt",
 Daten(){
 zurückkehren {
  arr: Array.from({Länge: 5}, (v, i) => {return {id: i, Daten: i}})
 }
 },
 Methoden: {
 prüfen(){
  dies.arr.shift();
 }
 }
}
</Skript>

Zusammenfassen

Dies ist das Ende dieses Artikels über die Anwendung von Schlüsseln bei der Seitendarstellung in Vue. Weitere relevante Anwendungsinhalte zum Schlüssel für die Seitendarstellung in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!