Atribút key vo Vue

Pri aktualizácii zoznamu prvkov Vue, vykresleného direktívou v-for, sa štandardne používa stratégia aktualizácie "na mieste". Ak sa poradie prvkov poľa alebo objektu zmenilo, Vue nebude presúvať prvky DOM, ale jednoducho aktualizuje každý prvok "na mieste", aby zobrazoval nové dáta podľa príslušného indexu.

Aby Vue vedelo určiť identitu každého prvku, a tak mohlo znovu použiť a zoradiť existujúce prvky, je potrebné špecifikovať unikátny atribút key pre každý prvok.

Bez kľúčov Vue používa algoritmus, ktorý minimalizuje presúvanie prvkov a bude sa snažiť čo najviac meniť/znovu použiť prvky rovnakého typu. Pri použití kľúčov sa prvky budú preusporadúvať v súlade s zmenou poradia kľúčov a prvky, ktorých kľúče už chýbajú, budú vždy odstránené/zničené.

Odporúča sa vždy uvádzať atribút key s v-for, okrem prípadov keď iterovaný obsah DOM je jednoduchý, alebo keď zámerne spoliehate na štandardnú stratégiu aktualizácie na zlepšenie výkonu.

Obvykle sa otázka pridania kľúčov vynorí pri iterovaní poľa objektov. V tomto prípade je jedným z kľúčov objektu unikátne pole, napríklad id:

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

Poďme iterovať uvedené pole cyklom, špecifikujúc príslušné kľúče:

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

Iterujte cyklom nasledujúce pole a vypíšte názvy produktov vo forme zoznamu ul:

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