Skip to content

Commit be6e514

Browse files
authored
Review on migration/key-attribute
1 parent 36e0cad commit be6e514

File tree

1 file changed

+10
-10
lines changed

1 file changed

+10
-10
lines changed

src/guide/migration/key-attribute.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,36 +7,36 @@ badges:
77

88
## Visão Geral
99

10-
- **NEW:** `key`s não são mais necessárias em branches `v-if`/`v-else`/`v-else-if`, ja que o Vue agora gera automaticamente `key`s unicas.
11-
- **BREAKING:** Se você imformar `key`s manualmente, então cada branch deve ter uma `key` unica. Você não pode mais usar intencionalmente usar a mesma `key` para forçar reuso de branch.
12-
- **BREAKING:** `key`s de `<template v-for>` devem ser colocadas na tag `<template>` ao inves de suas filhas.
10+
- **NOVO:** `key`s não são mais necessárias em _branches_ `v-if`/`v-else`/`v-else-if`, que o Vue agora gera automaticamente `key`s únicas.
11+
- **BREAKING:** Se você informar `key`s manualmente, então cada _branch_ deve ter uma `key` única. Você não pode mais usar intencionalmente a mesma `key` para forçar reuso de _branch_.
12+
- **BREAKING:** `key`s de `<template v-for>` devem ser colocadas na tag `<template>` (ao invés de em seus filhos).
1313

1414
## Background
1515

1616
O atributo especial `key` é usado como uma dica para o algoritmo de DOM virtual do Vue rastrear a identidade de um nó. Dessa forma, o Vue sabe quando pode reutilizar e corrigir nós existentes e quando precisa reordená-los ou recriá-los. Para mais informações, olhe as seções a seguir:
1717

18-
- [List Rendering: Maintaining State](/guide/list.html#maintaining-state)
19-
- [API Reference: `key` Special Attribute](/api/special-attributes.html#key)
18+
- [Renderização de Listas: Manutenção de Estado](/guide/list.html#manutencao-de-estado)
19+
- [Referência da API: Atributo Especial `key`](/api/special-attributes.html#key)
2020

21-
## Em branches condicionais
21+
## Em _Branches_ Condicionais
2222

23-
No Vue 2.x, era recomendado o uso de `key`s nos branches `v-if`/`v-else`/`v-else-if`.
23+
No Vue 2.x, era recomendado o uso de `key`s nos _branches_ `v-if`/`v-else`/`v-else-if`.
2424

2525
```html
2626
<!-- Vue 2.x -->
2727
<div v-if="condition" key="yes">Sim</div>
2828
<div v-else key="no">Não</div>
2929
```
3030

31-
O exemplo acima ainda funciona no Vue 3.x. Porém, não é mais recomendado o uso do atributo `key` em branches `v-if`/`v-else`/`v-else-if`, ja que `key`s unicas são geradas automaticamente em branches condicionais caso você não as informe.
31+
O exemplo acima ainda funciona no Vue 3.x. Porém, não é mais recomendado o uso do atributo `key` em _branches_ `v-if`/`v-else`/`v-else-if`, que `key`s únicas são geradas automaticamente em _branches_ condicionais caso você não as informe.
3232

3333
```html
3434
<!-- Vue 3.x -->
3535
<div v-if="condition">Sim</div>
3636
<div v-else>Não</div>
3737
```
3838

39-
A grande mudança (breaking change) é que se você informar `key`s manualmente, cada branch deverá usar uma `key` unica. Na maioria dos casos, você pode remover essas `key`s.
39+
A grande mudança (breaking change) é que se você informar `key`s manualmente, cada branch deverá usar uma `key` única. Na maioria dos casos, você pode remover essas `key`s.
4040

4141
```html
4242
<!-- Vue 2.x -->
@@ -47,7 +47,7 @@ A grande mudança (breaking change) é que se você informar `key`s manualmente,
4747
<div v-if="condition">Sim</div>
4848
<div v-else>Não</div>
4949

50-
<!-- Vue 3.x (solução alternativa: garantir que as keys sejam sempre unicas) -->
50+
<!-- Vue 3.x (solução alternativa: garantir que as keys sejam sempre únicas) -->
5151
<div v-if="condition" key="a">Sim</div>
5252
<div v-else key="b">Não</div>
5353
```

0 commit comments

Comments
 (0)