Атрибут key en Vue

Al actualizar Vue una lista de elementos, renderizada por la directiva v-for, por defecto se utiliza una estrategia de actualización "in situ". Si el orden de los elementos del array o del objeto cambia, Vue no moverá los elementos DOM, sino que simplemente actualizará cada elemento "in situ", para que muestre los nuevos datos en el índice correspondiente.

Para indicar a Vue cómo determinar la identidad de cada elemento, y, de este modo, reutilizar y ordenar los elementos existentes, es necesario especificar un atributo único key para cada elemento.

Sin claves, Vue utiliza un algoritmo que minimiza los movimientos de elementos y intentará al máximo modificar/reutilizar elementos del mismo tipo. Al usar claves, los elementos se reordenarán de acuerdo con el cambio en el orden de las claves, y los elementos cuyas claves ya no estén presentes, serán siempre eliminados/destruidos.

Se recomienda especificar siempre el atributo key con v-for, excepto en los casos cuando el contenido iterable del DOM es simple, o cuando conscientemente se confía en la estrategia de actualización por defecto para mejorar el rendimiento.

Generalmente, la cuestión de añadir claves surge al iterar un array de objetos. En este caso, una de las claves del objeto es un campo único, por ejemplo, id:

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

Iteremos el array proporcionado con un bucle, especificando las claves correspondientes:

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

Itere con un bucle el siguiente array y muestre los nombres de los productos en forma de lista ul:

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