key Chave de Identidade em Listas
Última atualização: 2026-10-22
key Chave de Identidade em Listas
A key é o identificador dos itens do v-for: ajuda o Vue a reutilizar/reconstruir nós com precisão e garante estados corretos ao adicionar ou remover itens da lista.
| Grupo | Integrados |
|---|---|
| Tipo | Atributo Especial |
| Escopo | Template |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
<li v-for="item in items" :key="item.id">{{ item.name }}</li>⚙️ Argumentos
| props | Um valor único e estável (use o id dos dados; não use o índice) |
|---|
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Reversing reorders rows without dragging state into the wrong row.💡 Pontos-chave
⚠️ Aviso Usar o índice como key é um erro clássico: após inserir/remover, o Vue reutiliza nós da forma errada e conteúdo digitado/animações se misturam entre linhas.
ℹ️ Nota A key também serve para recriação forçada: dê ao componente um valor que muda e ele será recriado.
💡 Dica Prefira um id estável; sem id, use um campo único do negócio; o índice é o último recurso.
🏷️ Integrados relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P E se a key for omitida?
R O Vue usa a estratégia de reuso local e emite um aviso: em listas simples parece funcionar, mas erra ao adicionar/remover/ordenar.
P As keys precisam ser únicas globalmente?
R Basta serem únicas dentro da mesma lista.
P A key pode forçar re-renderização?
R Sim: vincule ao componente um valor que muda; ao mudar, ele é destruído e recriado.
