Атрибут key във Vue

При актуализиране на списък с елементи от Vue, рендерирани от директивата v-for, по подразбиране се използва стратегия за актуализиране "на място". Ако редът на елементите в масива или обекта се промени, Vue няма да премества елементите в DOM, а просто ще актуализира всеки елемент "на място", за да показва новите данни на съответния индекс.

За да подскажете на Vue как да определя идентичността на всеки елемент, и по този начин да използва повторно и подрежда съществуващите елементи, е необходимо да се посочи уникален атрибут key за всеки елемент.

Без ключове Vue използва алгоритъм, който минимизира преместването на елементи и ще се опитва максимално да променя/използва повторно елементи от един и същ тип. При използване на ключове, елементите ще се пренареждат в съответствие с промяната в последователността на ключовете, а елементи, чиито ключове вече липсват, ще винаги се премахват/унищожават.

Препоръчително е винаги да се указва атрибут key с v-for, освен в случаите, когато съдържанието, което се итерира в DOM, е просто, или когато съзнателно разчитате на стратегията за актуализиране по подразбиране за подобряване на производителността.

Обикновено въпросът за добавяне на ключове възниква при итерация на масив от обекти. В този случай един от ключовете на обекта е уникално поле, например id:

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

Нека да итерираме дадения масив с цикъл, като посочим съответните ключове:

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

Итерирайте следния масив с цикъл и изведете имената на продуктите под формата на списък ul:

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