Das key-Attribut in Vue

Wenn Vue eine Liste von Elementen aktualisiert, die durch die v-for-Direktive gerendert wurde, verwendet es standardmäßig eine "In-Place"-Aktualisierungsstrategie. Wenn sich die Reihenfolge der Elemente im Array oder Objekt geändert hat, wird Vue keine DOM-Elemente verschieben, sondern einfach jedes Element "vor Ort" aktualisieren, um die neuen Daten am entsprechenden Index anzuzeigen.

Um Vue mitzuteilen, wie es die Identität jedes Elements bestimmen kann, und somit vorhandene Elemente wiederzuverwenden und neu anzuordnen, muss ein eindeutiges key-Attribut für jedes Element angegeben werden.

Ohne Keys verwendet Vue einen Algorithmus, der das Verschieben von Elementen minimiert und versucht, Elemente desselben Typs so weit wie möglich zu ändern/wiederzuverwenden. Bei Verwendung von Keys werden Elemente entsprechend der Änderung in der Reihenfolge der Keys neu angeordnet, und Elemente, deren Keys nicht mehr vorhanden sind, werden immer entfernt/zerstört.

Es wird empfohlen, immer ein key-Attribut mit v-for anzugeben, außer wenn der iterierte DOM-Inhalt einfach ist oder Sie bewusst auf die Standard-Aktualisierungsstrategie zur Verbesserung der Leistung vertrauen.

Generell stellt sich die Frage nach dem Hinzufügen von Keys beim Durchlaufen eines Arrays von Objekten. In diesem Fall ist einer der Keys des Objekts ein eindeutiges Feld, zum Beispiel id:

data() {
	return {
		users: [
			{
				id: 1,
				name: 'name1',
				surn: 'surn1',
			},
			{
				id: 2,
				name: 'name2',
				surn: 'surn2',
			},
			{
				id: 3,
				name: 'name3',
				surn: 'surn3',
			},
		]
	}
}

Lassen Sie uns das angegebene Array mit einer Schleife durchlaufen und die entsprechenden Keys angeben:

<template>
	<p v-for="user in users" :key="user.id">
		{{ user.name }}
		{{ user.surn }}
	</p>
</template>

Durchlaufen Sie das folgende Array mit einer Schleife und geben Sie die Produktnamen als ul-Liste aus:

data() {
	return {
		products: [
			{
				id: 1,
				name: 'product1',
			},
			{
				id: 2,
				name: 'product2',
			},
			{
				id: 3,
				name: 'product3',
			},
		]
	}
}