Atributas key Vue

Atnaujinant Vue elementų sąrašą, atvaizduotą v-for direktyva, pagal nutylėjimą naudojama "vietoje" atnaujinimo strategija. Jei masyvo ar objekto elementų tvarka pasikeitė, Vue neperkels DOM elementų, o tiesiog atnaujins kiekvieną elementą "vietoje", kad jis atvaizduotų naujus duomenis pagal atitinkamą indeksą.

Kad Vue suprastų, kaip nustatyti kiekvieno elemento tapatybę, ir tokiu būdu pakartotinai panaudoti bei išdėstyti esančius elementus, būtina nurodyti unikalų key atributą kiekvienam elementui.

Be raktų Vue naudoja algoritmą, kuris minimalizuoja elementų perkėlimą ir kiek įmanoma stengsis keisti/pakartotinai panaudoti to paties tipo elementus. Naudojant raktus, elementai bus pertvarkyti atitinkamai su rakto eilės tvarkos pakeitimu, o elementai, kurių raktai jau nebėra, bus visada pašalinami/naikinti.

Rekomenduojama visada nurodyti key atributą su v-for, išskyrus atvejus, kai iteruojamas DOM turinys yra paprastas, arba kai sąmoningai pasiklioviate numatytaja atnaujinimo strategija, kad pagerintumėte našumą.

Paprastai raktų pridėjimo klausimas kyla pereinant objektų masyvą. Šiuo atveju vienas iš objekto raktų yra unikalus laukas, pavyzdžiui, id:

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

Peržiūrėkime pateiktą masyvą ciklu, nurodydami atitinkamus raktus:

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

Peržiūrėkite ciklu šį masyvą ir atvaizduokite produktų pavadinimus kaip sąrašą ul:

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