Skip to content
This repository was archived by the owner on Aug 8, 2022. It is now read-only.

Commit 49929d3

Browse files
authored
update key-attribute.md (#717)
1 parent 7220981 commit 49929d3

File tree

1 file changed

+9
-9
lines changed

1 file changed

+9
-9
lines changed

src/guide/migration/key-attribute.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,19 @@ badges:
88
## 概览
99

1010
- **新增**:对于 `v-if`/`v-else`/`v-else-if` 的各分支项 `key` 将不再是必须的,因为现在 Vue 会自动生成唯一的 `key`
11-
- **非兼容**:如果你手动提供 `key`,那么每个分支必须使用唯一的 `key`你不能通过故意使用相同的 `key` 来强制重用分支。
11+
- **非兼容**:如果你手动提供 `key`,那么每个分支必须使用唯一的 `key`你将不再能通过故意使用相同的 `key` 来强制重用分支。
1212
- **非兼容**`<template v-for>``key` 应该设置在 `<template>` 标签上 (而不是设置在它的子节点上)。
1313

1414
## 背景
1515

16-
特殊的 `key` attribute 被用于提示 Vue 的虚拟 DOM 算法来保持对节点身份的持续跟踪。这样 Vue 可以知道何时能够重用和修补现有节点,以及何时需要对它们重新排序或重新创建。关于其它更多信息,可以查看以下章节:
16+
特殊的 `key` attribute 被作为 Vue 的虚拟 DOM 算法的提示,以保持对节点身份的持续跟踪。这样 Vue 就可以知道何时能够重用和修补现有节点,以及何时需要对它们重新排序或重新创建。关于其它更多信息,可以查看以下章节:
1717

1818
- [列表渲染:维护状态](/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)
2020

2121
## 在条件分支中
2222

23-
Vue 2.x 建议在 `v-if`/`v-else`/`v-else-if` 的分支中使用 `key`
23+
Vue 2.x 中,建议在 `v-if`/`v-else`/`v-else-if` 的分支中使用 `key`
2424

2525
```html
2626
<!-- Vue 2.x -->
@@ -43,18 +43,18 @@ Vue 2.x 建议在 `v-if`/`v-else`/`v-else-if` 的分支中使用 `key`。
4343
<div v-if="condition" key="a">Yes</div>
4444
<div v-else key="a">No</div>
4545

46-
<!-- Vue 3.x (recommended solution: remove keys) -->
46+
<!-- Vue 3.x (推荐方案:移除 key) -->
4747
<div v-if="condition">Yes</div>
4848
<div v-else>No</div>
4949

50-
<!-- Vue 3.x (alternate solution: make sure the keys are always unique) -->
50+
<!-- Vue 3.x (替代方案:确保 key 始终是唯一的) -->
5151
<div v-if="condition" key="a">Yes</div>
5252
<div v-else key="b">No</div>
5353
```
5454

5555
## 结合 `<template v-for>`
5656

57-
在 Vue 2.x 中 `<template>` 标签不能拥有 `key`不过你可以为其每个子节点分别设置 `key`
57+
在 Vue 2.x 中`<template>` 标签不能拥有 `key`不过,你可以为其每个子节点分别设置 `key`
5858

5959
```html
6060
<!-- Vue 2.x -->
@@ -64,7 +64,7 @@ Vue 2.x 建议在 `v-if`/`v-else`/`v-else-if` 的分支中使用 `key`。
6464
</template>
6565
```
6666

67-
在 Vue 3.x 中 `key` 则应该被设置在 `<template>` 标签上。
67+
在 Vue 3.x 中`key` 则应该被设置在 `<template>` 标签上。
6868

6969
```html
7070
<!-- Vue 3.x -->
@@ -74,7 +74,7 @@ Vue 2.x 建议在 `v-if`/`v-else`/`v-else-if` 的分支中使用 `key`。
7474
</template>
7575
```
7676

77-
类似地,当使用 `<template v-for>` 时存在使用 `v-if` 的子节点,`key` 应改为设置在 `<template>` 标签上。
77+
类似地,当使用 `<template v-for>` 时如果存在使用 `v-if` 的子节点,`key` 应改为设置在 `<template>` 标签上。
7878

7979
```html
8080
<!-- Vue 2.x -->

0 commit comments

Comments
 (0)