Атрыбут 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',
			},
		]
	}
}