Atrybut key w Vue

Podczas aktualizowania przez Vue listy elementów, wyrenderowanej za pomocą dyrektywy v-for, domyślnie używana jest strategia aktualizacji "w miejscu". Jeśli kolejność elementów tablicy lub obiektu ulegnie zmianie, Vue nie przeniesie elementów DOM, a po prostu zaktualizuje każdy element "w miejscu", tak aby wyświetlał nowe dane według odpowiedniego indeksu.

Aby podpowiedzieć Vue, jak identyfikować tożsamość każdego elementu, i tym samym ponownie wykorzystywać i porządkować istniejące elementy, należy określić unikalny atrybut key dla każdego elementu.

Bez kluczy Vue używa algorytmu, który minimalizuje przenoszenie elementów i będzie starał się w maksymalnym stopniu zmieniać/ponownie wykorzystywać elementy tego samego typu. Przy użyciu kluczy elementy będą reordynowane zgodnie ze zmianą kolejności kluczy, a elementy, których klucze już nie występują, będą zawsze usuwane/niszczone.

Zaleca się zawsze określać atrybut key z v-for, z wyjątkiem przypadków gdy iterowana zawartość DOM jest prosta, lub gdy świadomie polegasz na domyślnej strategii aktualizacji w celu poprawy wydajności.

Zazwyczaj kwestia dodawania kluczy pojawia się przy iteracji tablicy obiektów. W tym przypadku jednym z kluczy obiektu jest unikalne pole, na przykład, id:

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

Przejdźmy pętlą po podanej tablicy, określając odpowiednie klucze:

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

Przejdź pętlą po następującej tablicy i wyświetl nazwy produktów w postaci listy ul:

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