L'attributo key in Vue

Quando Vue aggiorna una lista di elementi, renderizzata con la direttiva v-for, utilizza per impostazione predefinita una strategia di aggiornamento "sul posto". Se l'ordine degli elementi dell'array o dell'oggetto cambia, Vue non sposterà gli elementi DOM, ma semplicemente aggiornerà ciascun elemento "sul posto", in modo che visualizzi i nuovi dati in corrispondenza dell'indice appropriato.

Per suggerire a Vue come determinare l'identità di ciascun elemento, e, in questo modo, riutilizzare e riordinare gli elementi esistenti, è necessario specificare un attributo univoco key per ogni elemento.

Senza chiavi, Vue utilizza un algoritmo che minimizza gli spostamenti degli elementi e cercherà al massimo di modificare/riutilizzare elementi dello stesso tipo. Utilizzando le chiavi, gli elementi verranno riordinati in accordo con il cambiamento dell'ordine delle chiavi, e gli elementi le cui chiavi sono assenti, saranno sempre rimossi/distrutti.

Si raccomanda di specificare sempre l'attributo key con v-for, tranne nei casi in cui il contenuto iterabile nel DOM sia semplice, o quando si fa consapevolmente affidamento sulla strategia di aggiornamento predefinita per migliorare le prestazioni.

Generalmente la questione dell'aggiunta delle chiavi sorge quando si itera attraverso un array di oggetti. In questo caso, una delle chiavi dell'oggetto è un campo univoco, ad esempio, id:

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

Iteriamo attraverso l'array fornito con un ciclo, specificando le chiavi appropriate:

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

Itera con un ciclo attraverso il seguente array e visualizza i nomi dei prodotti sotto forma di lista ul:

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