A key attribútum Vue-ban

Amikor a Vue frissíti a v-for direktívával megjelenített elemek listáját, alapértelmezetten egy "helyben történő" frissítési stratégiát alkalmaz. Ha a tömb vagy objektum elemeinek sorrendje megváltozik, a Vue nem fogja mozgatni a DOM elemeket, hanem egyszerűen minden elemet "helyben" frissít, hogy az megjelenítse az új adatokat a megfelelő indexen.

Ahhoz, hogy a Vue számára jelezzük, hogyan azonosítsa minden egyes elem identitását, és így újra felhasználja és átrendezi a meglévő elemeket, minden elemhez egy egyedi key attribútumot kell megadni.

Kulcsok nélkül a Vue egy olyan algoritmust használ, amely minimalizálja az elemek mozgatását és a lehető legnagyobb mértékben igyekszik megváltoztatni/újrafelhasználni az azonos típusú elemeket. Kulcsok használatakor az elemek a kulcsok sorrendjének változásának megfelelően lesznek átrendezve, az onnan hiányzó kulcsokkal rendelkező elemek pedig mindig eltávolításra/-pusztításra kerülnek.

Javasolt mindig megadni a key attribútumot a v-for mellett, kivéve azokat az eseteket, amikor a bejárható DOM tartalom egyszerű, vagy szándékosan az alapértelmezett frissítési stratégiára támaszkodunk a teljesítmény javítása érdekében.

Általában a kulcsok hozzáadásának kérdése akkor merül fel, amikor objektumok tömbjét járjuk be. Ebben az esetben az objektum egyik kulcsa egy egyedi mező, például a id:

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

Járjuk be a megadott tömböt egy ciklussal, megadva a megfelelő kulcsokat:

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

Járja be ciklussal a következő tömböt és jelenítse meg a termékek nevét egy ul listában:

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