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:

javascriptdata() {
  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:

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

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