@@ -8,19 +8,19 @@ badges:
8
8
## 概览
9
9
10
10
- ** 新增** :对于 ` v-if ` /` v-else ` /` v-else-if ` 的各分支项 ` key ` 将不再是必须的,因为现在 Vue 会自动生成唯一的 ` key ` 。
11
- - ** 非兼容** :如果你手动提供 ` key ` ,那么每个分支必须使用唯一的 ` key ` 。你不能通过故意使用相同的 ` key ` 来强制重用分支。
11
+ - ** 非兼容** :如果你手动提供 ` key ` ,那么每个分支必须使用唯一的 ` key ` 。你将不再能通过故意使用相同的 ` key ` 来强制重用分支。
12
12
- ** 非兼容** :` <template v-for> ` 的 ` key ` 应该设置在 ` <template> ` 标签上 (而不是设置在它的子节点上)。
13
13
14
14
## 背景
15
15
16
- 特殊的 ` key ` attribute 被用于提示 Vue 的虚拟 DOM 算法来保持对节点身份的持续跟踪 。这样 Vue 可以知道何时能够重用和修补现有节点 ,以及何时需要对它们重新排序或重新创建。关于其它更多信息,可以查看以下章节:
16
+ 特殊的 ` key ` attribute 被作为 Vue 的虚拟 DOM 算法的提示,以保持对节点身份的持续跟踪 。这样 Vue 就可以知道何时能够重用和修补现有节点 ,以及何时需要对它们重新排序或重新创建。关于其它更多信息,可以查看以下章节:
17
17
18
18
- [ 列表渲染:维护状态] ( /guide/list.html#%E7%BB%B4%E6%8A%A4%E7%8A%B6%E6%80%81 )
19
- - [ API 参考:特殊指令 ` key ` ] ( /api/special-attributes.html#key )
19
+ - [ API 参考:特殊的 ` key ` attribute ] ( /api/special-attributes.html#key )
20
20
21
21
## 在条件分支中
22
22
23
- Vue 2.x 建议在 ` v-if ` /` v-else ` /` v-else-if ` 的分支中使用 ` key ` 。
23
+ 在 Vue 2.x 中, 建议在 ` v-if ` /` v-else ` /` v-else-if ` 的分支中使用 ` key ` 。
24
24
25
25
``` html
26
26
<!-- Vue 2.x -->
@@ -43,18 +43,18 @@ Vue 2.x 建议在 `v-if`/`v-else`/`v-else-if` 的分支中使用 `key`。
43
43
<div v-if =" condition" key =" a" >Yes</div >
44
44
<div v-else key =" a" >No</div >
45
45
46
- <!-- Vue 3.x (recommended solution: remove keys ) -->
46
+ <!-- Vue 3.x (推荐方案:移除 key ) -->
47
47
<div v-if =" condition" >Yes</div >
48
48
<div v-else >No</div >
49
49
50
- <!-- Vue 3.x (alternate solution: make sure the keys are always unique ) -->
50
+ <!-- Vue 3.x (替代方案:确保 key 始终是唯一的 ) -->
51
51
<div v-if =" condition" key =" a" >Yes</div >
52
52
<div v-else key =" b" >No</div >
53
53
```
54
54
55
55
## 结合 ` <template v-for> `
56
56
57
- 在 Vue 2.x 中 ` <template> ` 标签不能拥有 ` key ` 。不过你可以为其每个子节点分别设置 ` key ` 。
57
+ 在 Vue 2.x 中, ` <template> ` 标签不能拥有 ` key ` 。不过,你可以为其每个子节点分别设置 ` key ` 。
58
58
59
59
``` html
60
60
<!-- Vue 2.x -->
@@ -64,7 +64,7 @@ Vue 2.x 建议在 `v-if`/`v-else`/`v-else-if` 的分支中使用 `key`。
64
64
</template >
65
65
```
66
66
67
- 在 Vue 3.x 中 ` key ` 则应该被设置在 ` <template> ` 标签上。
67
+ 在 Vue 3.x 中, ` key ` 则应该被设置在 ` <template> ` 标签上。
68
68
69
69
``` html
70
70
<!-- Vue 3.x -->
@@ -74,7 +74,7 @@ Vue 2.x 建议在 `v-if`/`v-else`/`v-else-if` 的分支中使用 `key`。
74
74
</template >
75
75
```
76
76
77
- 类似地,当使用 ` <template v-for> ` 时存在使用 ` v-if ` 的子节点,` key ` 应改为设置在 ` <template> ` 标签上。
77
+ 类似地,当使用 ` <template v-for> ` 时如果存在使用 ` v-if ` 的子节点,则 ` key ` 应改为设置在 ` <template> ` 标签上。
78
78
79
79
``` html
80
80
<!-- Vue 2.x -->
0 commit comments