Skip to content

Commit d05ecfd

Browse files
committed
review指摘対応
1 parent 468db85 commit d05ecfd

File tree

1 file changed

+5
-5
lines changed

1 file changed

+5
-5
lines changed

src/guide/migration/key-attribute.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ badges:
88
## 概要
99

1010
- **新着:** Vue が一意の `key` を自動的に生成するようになったため、`v-if`/`v-else`/`v-else-if` 分岐で `key` が不要になりました。
11-
- **速報:** 手動で `key` を指定する場合、各分岐は一意の `key` を使用する必要があります。 同じ `key` を意図的に使用して分岐を強制的に再利用することはできなくなりました。
12-
- **速報:** `<template v-for>` における `key` は、`<template>` タグに配置する必要があります(子の要素ではない)
11+
- **破壊的変更:** 手動で `key` を指定する場合、各分岐は一意の `key` を使用する必要があります。 同じ `key` を意図的に使用して分岐を強制的に再利用することはできなくなりました。
12+
- **破壊的変更:** `<template v-for>` における `key` は、`<template>` タグに配置する必要があります(子の要素ではない)
1313

1414
## 背景
1515

16-
`key` 属性はノードの ID を追跡するために Vue の仮想 DOM のアルゴリズムのヒントとして使用されます。 こうすることで Vue は既存のノードを再利用してパッチを適用できる時期と、ノードを並べ替えまたは再作成する必要がある時期を識別します。 詳細については、次のセクションを参照してください。
16+
特別な属性である `key` はノードの ID を追跡するために Vue の仮想 DOM のアルゴリズムのヒントとして使用されます。 こうすることで Vue は既存のノードを再利用してパッチを適用できる時期と、ノードを並べ替えまたは再作成する必要がある時期を識別します。 詳細については、次のセクションを参照してください。
1717

1818
- [リストレンダリング: 状態の維持](/guide/list.html#maintaining-state)
1919
- [API リファレンス: 特別な属性 `key` ](/api/special-attributes.html#key)
@@ -28,15 +28,15 @@ Vue 2.x では、`v-if` / `v-else` / `v-else-if` 分岐で `key` を使用する
2828
<div v-else key="no">No</div>
2929
```
3030

31-
上記の例は、Vue3.x でも機能します。 ただし、`v-if` / `v-else` / `v-else-if` 分岐で `key` 属性を使用することはお勧めしません。条件分岐で `key` を指定しない場合、一意となる `key` が自動的に生成されるようになったためです。
31+
上記の例は、Vue3.x でも機能します。 ただし、`v-if` / `v-else` / `v-else-if` 分岐で `key` 属性を使用することはおすすめしません。条件分岐で `key` を指定しない場合、一意となる `key` が自動的に生成されるようになったためです。
3232

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

39-
重大な変更は手動で `key` を指定する場合、各分岐は一意となる `key` を使用する必要があることです。ほとんどの場合、これらの `key` は削除できます。
39+
破壊的変更は、手動で `key` を指定する場合、各分岐に一意となる `key` を使用する必要があることです。ほとんどの場合、これらの `key` は削除できます。
4040

4141
```html
4242
<!-- Vue 2.x -->

0 commit comments

Comments
 (0)