Atribut key ve Vue

Při aktualizaci seznamu prvků ve Vue, vykresleného direktivou v-for, se ve výchozím nastavení používá strategie aktualizace "na místě". Pokud se pořadí prvků pole nebo objektu změnilo, Vue nebude přesouvat prvky DOM, ale jednoduše aktualizuje každý prvek "na místě", aby zobrazoval nová data na příslušném indexu.

Aby Vue vědělo, jak identifikovat každý prvek, a tak mohl znovu použít a seřadit existující prvky, je nutné zadat jedinečný atribut key pro každý prvek.

Bez klíčů Vue používá algoritmus, který minimalizuje přesuny prvků a bude se maximálně snažit měnit/znovu používat prvky stejného typu. Při použití klíčů budou prvky přeuspořádány v souladu se změnou pořadí klíčů, a prvky, jejichž klíče již chybí, budou vždy odstraněny/zničeny.

Doporučuje se vždy uvádět atribut key s v-for, kromě případů, kdy je iterovaný obsah DOM jednoduchý, nebo když se vědomě spoléháte na výchozí strategii aktualizace pro zlepšení výkonu.

Obecně se otázka přidávání klíčů objevuje při procházení pole objektů. V tomto případě je jedním z klíčů objektu jedinečné pole, například id:

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

Pojďme projít uvedené pole cyklem, a zadat příslušné klíče:

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

Projděte cyklem následující pole a vypište názvy produktů ve formě seznamu ul:

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