Nøkkelattributtet i Vue

Når Vue oppdaterer en liste av elementer, rendret med direktivet v-for, brukes en "på stedet"-oppdateringsstrategi som standard. Hvis rekkefølgen på elementene i arrayen eller objektet endres, vil Vue ikke flytte DOM-elementene, men bare oppdatere hvert element "på stedet" for å vise de nye dataene ved den tilsvarende indeksen.

For å hjelpe Vue med å bestemme identiteten til hvert element, og dermed gjenbruke og ordne eksisterende elementer, må du spesifisere et unikt attributt key for hvert element.

Uten nøkler bruker Vue en algoritme som minimerer flytting av elementer og vil strebe etter å endre/gjenbruke elementer av samme type så mye som mulig. Med bruk av nøkler vil elementene bli omorganisert i samsvar med endringen i nøkkelenes rekkefølge, og elementer hvis nøkler ikke lenger er til stede, vil alltid bli fjernet/ødelagt.

Det anbefales alltid å spesifisere attributtet key med v-for, bortsett fra når det itererte innholdet i DOM er enkelt, eller når du bevisst stoler på standardoppdateringsstrategien for å forbedre ytelsen.

Spørsmålet om å legge til nøkler oppstår vanligvis når man itererer gjennom en array av objekter. I dette tilfellet er ett av nøklene i objektet 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',
			},
		]
	}
}

La oss iterere gjennom den gitte arrayen med en løkke, og spesifisere de tilsvarende nøklene:

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

Iterer gjennom følgende array og vis produktnavnene som en liste ul:

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