L'attribut key dans Vue

Lorsque Vue met à jour une liste d'éléments, rendue par la directive v-for, il utilise par défaut une stratégie de mise à jour "sur place". Si l'ordre des éléments du tableau ou de l'objet a changé, Vue ne déplacera pas les éléments du DOM, mais mettra simplement à jour chaque élément "sur place" pour qu'il affiche les nouvelles données à l'index correspondant.

Pour indiquer à Vue comment déterminer l'identité de chaque élément, et ainsi réutiliser et réordonner les éléments existants, il est nécessaire de spécifier un attribut key unique pour chaque élément.

Sans clés, Vue utilise un algorithme qui minimise les déplacements d'éléments et qui s'efforcera au maximum de modifier/réutiliser les éléments du même type. Avec l'utilisation de clés, les éléments seront réordonnés en fonction du changement de l'ordre des clés, et les éléments dont les clés sont absentes seront toujours supprimés/détruits.

Il est recommandé de toujours spécifier l'attribut key avec v-for, sauf lorsque le contenu itérable dans le DOM est simple, ou lorsque vous comptez délibérément sur la stratégie de mise à jour par défaut pour améliorer les performances.

Généralement, la question de l'ajout de clés se pose lors de l'itération sur un tableau d'objets. Dans ce cas, l'une des clés de l'objet est un champ unique, par exemple, id :

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

Parcourons le tableau donné avec une boucle, en spécifiant les clés correspondantes :

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

Parcourez en boucle le tableau suivant et affichez les noms des produits sous forme de liste ul :

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