Nøgleattributten i Vue

Når Vue opdaterer en liste af elementer, gengivet med direktivet v-for, bruges en "på stedet"-opdateringsstrategi som standard. Hvis rækkefølgen af elementerne i arrayet eller objektet ændres, flytter Vue ikke DOM-elementer, men opdaterer simpelthen hvert element "på stedet", så det viser de nye data på det tilsvarende indeks.

For at fortælle Vue, hvordan man identificerer identiteten af hvert element, og dermed genbruge og arrangere eksisterende elementer, skal du angive en unik attribut key for hvert element.

Uden nøgler bruger Vue en algoritme, der minimerer flytning af elementer og vil maksimalt forsøge at ændre/genbruge elementer af samme type. Ved brug af nøgler vil elementer blive omarrangeret i overensstemmelse med ændringen i nøglernes rækkefølge, og elementer, hvis nøgler ikke længere er til stede, vil altid blive fjernet/destrueret.

Det anbefales altid at angive attributten key med v-for, bortset fra tilfælde hvor det itererbare indhold i DOM er simpelt, eller når du bevidst stoler på standardopdateringsstrategien for at forbedre ydeevnen.

Generelt opstår spørgsmålet om tilføjelse af nøgler ved gennemløb af et array af objekter. I dette tilfælde er et af objektets nøgler et unikt felt, for eksempel id:

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

Lad os gennemløbe det givne array med en løkke, og angive de tilsvarende nøgler:

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

Gennemløb følgende array med en løkke og udskriv produktnavnene som en liste ul:

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