Attributet key i Vue

När Vue uppdaterar en lista av element, renderad med direktivet v-for, används som standard en uppdateringsstrategi "på plats". Om ordningen på elementen i arrayen eller objektet har ändrats, kommer Vue inte att flytta DOM-elementen, utan kommer bara att uppdatera varje element "på plats" så att det visar de nya datan på motsvarande index.

För att tipsa Vue om hur den kan identifiera varje elements identitet, och därigenom återanvända och ordna befintliga element, måste man specificera ett unikt attribut key för varje element.

Utan nycklar använder Vue en algoritm som minimerar flytt av element och kommer så mycket som möjligt försöka att ändra/återanvända element av samma typ. När nycklar används kommer elementen att omordnas i enlighet med förändringarna i nyckelordningen, och element vars nycklar inte längre finns kommer alltid att tas bort/förstöras.

Det rekommenderas att alltid specificera attributet key med v-for, förutom när det itererbara innehållet i DOM är enkelt, eller när du medvetet förlitar dig på standarduppdateringsstrategin för att förbättra prestandan.

Generellt sett uppstår frågan om att lägga till nycklar vid iteration av en array av objekt. I det här fallet är ett av nycklarna i objektet ett unikt fält, till exempel id:

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

Låt oss iterera genom den givna arrayen med en loop, och specificera motsvarande nycklar:

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

Iterera genom följande array och visa produktnamnen som en lista ul:

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