Atributo key no Vue

Ao atualizar uma lista de elementos no Vue, renderizada pela diretiva v-for, a estratégia de atualização padrão é "in-place". Se a ordem dos elementos do array ou do objeto mudar, o Vue não irá mover os elementos do DOM, mas simplesmente atualizará cada elemento "in-place" para que ele exiba os novos dados no índice correspondente.

Para sugerir ao Vue como determinar a identidade de cada elemento e, assim, reutilizar e reordenar os elementos existentes, é necessário especificar um atributo key único para cada elemento.

Sem chaves, o Vue usa um algoritmo que minimiza a movimentação de elementos e tentará ao máximo alterar/reutilizar elementos do mesmo tipo. Ao usar chaves, os elementos serão reordenados de acordo com a mudança na ordem das chaves, e os elementos cujas chaves não estão mais presentes serão sempre removidos/destruídos.

É recomendado sempre especificar o atributo key com v-for, exceto quando o conteúdo iterável do DOM é simples, ou quando você confia conscientemente na estratégia de atualização padrão para melhorar o desempenho.

Geralmente, a questão de adicionar chaves surge ao iterar sobre um array de objetos. Nesse caso, uma das chaves do objeto é um campo único, por exemplo, id:

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

Vamos iterar pelo array fornecido usando um loop, especificando as chaves correspondentes:

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

Itere pelo seguinte array usando um loop e exiba os nomes dos produtos em forma de lista ul:

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