Атрибут key у Vue-у

При ажурирању Vue листе елемената, коју је исцртала директива v-for, подразумевано се користи стратегија ажурирања "in-place". Ако се редослед елемената низа или објекта променио, Vue неће преместити DOM елементе, већ ће једноставно ажурирати сваки елемент "in-place", тако да приказује нове податке на одговарајућем индексу.

Да бисте Vue-у дали назнаку како да утврди идентитет сваког елемента, и тиме поново искористи и преуреди постојеће елементе, потребно је навести јединствени атрибут key за сваки елемент.

Без кључева, Vue користи алгоритам који минимизира померање елемената и у максималној могућој мери ће тежити да мења/поново користи елементе истог типа. Када се користе кључеви, елементи ће бити преуређени у складу са променом редоследа кључева, док ће елементи чији кључеви више не постоје, бити увек уклоњени/уништени.

Препоручује се да увек наведете атрибут key са v-for, осим у случајевима када је садржај DOM-a који се итерира једноставан, или када свесно ослањате на подразумевану стратегију ажурирања ради побољшања перформанси.

У питање додавања кључева обично се наилази при итерацији кроз низ објеката. У том случају, један од кључева објекта је јединствено поље, на пример, 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',
			},
		]
	}
}