Atributul key în Vue

La actualizarea unei liste de elemente în Vue, redată prin directiva v-for, în mod implicit este utilizată o strategie de actualizare "pe loc". Dacă ordinea elementelor tabloului sau a obiectului se schimbă, Vue nu va muta elementele DOM, ci pur și simplu va actualiza fiecare element "pe loc", pentru a afișa noile date la indexul corespunzător.

Pentru a-i sugera lui Vue cum să identifice identitatea fiecărui element și, astfel, să reutilizeze și să ordoneze elementele existente, este necesar să specificați un atribut unic key pentru fiecare element.

Fără chei, Vue utilizează un algoritm care minimizează mutarea elementelor și se va strădui să modifice/reutilizeze elementele aceluiași tip cât mai mult posibil. Cu utilizarea cheilor, elementele vor fi reordonate în conformitate cu modificarea ordinii cheilor, iar elementele ale căror chei nu mai sunt prezente vor fi întotdeauna eliminate/distruse.

Este recomandat să specificați întotdeauna atributul key cu v-for, cu excepția cazurilor în care conținutul iterat DOM este simplu, sau când vă bazați în mod conștient pe strategia de actualizare implicită pentru a îmbunătăți performanța.

În general, problema adăugării cheilor apare la iterarea unui tablou de obiecte. În acest caz, una dintre cheile obiectului este un câmp unic, de exemplu, id:

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

Să iterăm tabloul dat cu un buclă, specificând cheile corespunzătoare:

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

Iterați următorul tablou cu o buclă și afișați numele produselor sub formă de listă ul:

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