Het key attribuut in Vue

Bij het bijwerken van een lijst met elementen door Vue, weergegeven door de v-for richtlijn, wordt standaard een "in-place" update strategie gebruikt. Als de volgorde van de array-elementen of objecteigenschappen is veranderd, zal Vue geen DOM-elementen verplaatsen, maar simpelweg elk element "in-place" bijwerken zodat het de nieuwe gegevens op de bijbehorende index weergeeft.

Om Vue te helpen bepalen hoe de identiteit van elk element vastgesteld moet worden, en zo bestaande elementen te hergebruiken en opnieuw te ordenen, moet een uniek key attribuut worden opgegeven voor elk element.

Zonder keys gebruikt Vue een algoritme dat elementverplaatsingen minimaliseert en zoveel mogelijk zal proberen elementen van hetzelfde type te wijzigen/hergebruiken. Bij gebruik van keys zullen elementen worden herordend in overeenstemming met de verandering in de volgorde van de keys, en elementen waarvan de keys ontbreken, zullen altijd worden verwijderd/vernietigd.

Het wordt aanbevolen om altijd een key attribuut op te geven met v-for, behalve wanneer de herhaalde DOM-inhoud eenvoudig is, of wanneer u bewust vertrouwt op de standaard update strategie voor prestatieverbetering.

Over het algemeen rijst de kwestie van het toevoegen van keys bij het doorlopen van een array van objecten. In dit geval is een van de keys van het object een uniek veld, bijvoorbeeld id:

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

Laten we de gegeven array doorlopen met een loop, en de bijbehorende keys specificeren:

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

Doorloop de volgende array met een loop en toon de productnamen in de vorm van een ul lijst:

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