Atribut key v Vue

Ko Vue posodablja seznam elementov, upodobljenih z direktivo v-for, je privzeto uporabljena strategija posodabljanja "na mestu". Če se vrstni red elementov matrike ali objekta spremeni, Vue ne bo premaknil elementov DOM, temveč bo preprosto posodobil vsak element "na mestu", tako da prikaže nove podatke na ustreznem indeksu.

Da bi Vue-ju pokazali, kako naj določi identiteto vsakega elementa, in tako ponovno uporabil in uredil obstoječe elemente, je treba določiti edinstven atribut key za vsak element.

Brez ključev Vue uporablja algoritem, ki minimizira premike elementov in se bo maksimalno trudil spreminjati/ponovno uporabljati elemente istega tipa. Z uporabo ključev se bodo elementi preuredili v skladu s spremembo vrstnega reda ključev, elementi, katerih ključi so že odsotni, pa bodo vedno odstranjeni/unicičeni.

Priporočljivo je, da vedno navedete atribut key z v-for, razen v primerih, ko je vsebina DOM, ki se ponavlja, preprosta, ali ko se zavestno zanašate na privzeto strategijo posodabljanja za izboljšanje zmogljivosti.

Na splošno se vprašanje dodajanja ključev pojavi pri ponavljanju skozi matriko objektov. V tem primeru je eden od ključev objekta edinstveno polje, na primer id:

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

Ponovimo podano matriko z zanko, z določitvijo ustreznih ključev:

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

Ponovite z zanko naslednjo matriko in prikažite imena izdelkov kot seznam ul:

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