Die key kenmerk in Vue

Wanneer Vue 'n lys van elemente wat deur die v-for direktief gerender is opdateer, gebruik dit by verstek 'n "in plek" opdateringstrategie. As die volgorde van die skikking of objek elemente verander, sal Vue nie die DOM elemente verskuif nie, maar sal eenvoudig elke element "in plek" opdateer sodat dit die nuwe data by die ooreenstemmende indeks vertoon.

Om Vue te help om die identiteit van elke element te bepaal, en sodoende bestaande elemente te hergebruik en te rangskik, moet 'n unieke key kenmerk vir elke element gespesifiseer word.

Sonder sleutels gebruik Vue 'n algoritme wat die verskuiving van elemente minimeer en so veel as moontlik sal probeer om elemente van dieselfde tipe te verander/hergebruik. Met die gebruik van sleutels sal elemente herrangskik word volgens die verandering in die volgorde van die sleutels, en elemente waarvan die sleutels nie meer teenwoordig is nie, sal altyd verwyder/vernietig word.

Daar word aanbeveel om altyd die key kenmerk met v-for te spesifiseer, behalwe in gevalle waar die iteratiewe DOM inhoud eenvoudig is, of wanneer jy bewustelik staatmaak op die verstek opdateringstrategie vir beter werkverrigting.

Oor die algemeen kom die vraag om sleutels by te voeg op wanneer 'n skikking van objekte deurloop word. In hierdie geval is een van die sleutels van die objek 'n unieke veld, byvoorbeeld id:

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

Laat ons die gegewe skikking met 'n lus deurloop, met die toepaslike sleutels:

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

Deurloop die volgende skikking met 'n lus en vertoon die produk name in die vorm van 'n ul lys:

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