Key atribuut Vue's

Kui Vue uuendab elementide loendit, mille on renderdanud v-for direktiiv, kasutatakse vaikimisi "kohapeal" uuendamise strateegiat. Kui massiivi või objekti elementide järjekord on muutunud, ei prügi Vue DOM elemente ümber, vaid uuendab lihtsalt iga elementi "kohapeal", et see kuvaks vastavas indeksis olevaid uusi andmeid.

Et anda Vuele vihje, kuidas tuvastada iga elemendi identiteet ja seeläbi taaskasutada ja järjestada olemasolevaid elemente, tuleb iga elemendi jaoks määrata kordumatu atribuut key.

Ilma võtmeteta kasutab Vue algoritmi, mis minimeerib elementide liigutamist ja püüab maksimaalselt muuta/taaskasutada sama tüüpi elemente. Võtmete kasutamisel järjestatakse elemendi ümber vastavalt võtmete järjekorra muutusele, ning elemendid, mille võtmed on puudu, eemaldatakse/alati hävitatakse.

Soovitatav on alati määrata atribuut key koos v-for-ga, välja arvatud juhtudel, kui itereeritav DOM-sisu on lihtne või kui te teadlikult loodate vaikeuuendusstrateegiale jõudluse parandamiseks.

Üldiselt tekib võtmete lisamise küsimus massiivi objektide läbimisel. Sel juhul on üks objekti võtmetest kordumatu väli, näiteks id:

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

Läbime toodud massiivi tsükliga, määrates vastavad võtmed:

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

Läbige tsükliga järgmine massiiv ja kuvage toodete nimed loendina ul:

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