You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/migration/key-attribute.md
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,36 +7,36 @@ badges:
7
7
8
8
## Visão Geral
9
9
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`, já 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).
13
13
14
14
## Background
15
15
16
16
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:
-[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)
20
20
21
-
## Em branches condicionais
21
+
## Em _Branches_ Condicionais
22
22
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`.
24
24
25
25
```html
26
26
<!-- Vue 2.x -->
27
27
<divv-if="condition"key="yes">Sim</div>
28
28
<divv-elsekey="no">Não</div>
29
29
```
30
30
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`, já que `key`s únicas são geradas automaticamente em _branches_ condicionais caso você não as informe.
32
32
33
33
```html
34
34
<!-- Vue 3.x -->
35
35
<divv-if="condition">Sim</div>
36
36
<divv-else>Não</div>
37
37
```
38
38
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.
40
40
41
41
```html
42
42
<!-- Vue 2.x -->
@@ -47,7 +47,7 @@ A grande mudança (breaking change) é que se você informar `key`s manualmente,
47
47
<divv-if="condition">Sim</div>
48
48
<divv-else>Não</div>
49
49
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) -->
0 commit comments