File tree Expand file tree Collapse file tree 1 file changed +5
-5
lines changed Expand file tree Collapse file tree 1 file changed +5
-5
lines changed Original file line number Diff line number Diff line change @@ -8,12 +8,12 @@ badges:
8
8
## 概要
9
9
10
10
- ** 新着:** 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> ` タグに配置する必要があります(子の要素ではない)
13
13
14
14
## 背景
15
15
16
- ` key ` 属性はノードの ID を追跡するために Vue の仮想 DOM のアルゴリズムのヒントとして使用されます。 こうすることで Vue は既存のノードを再利用してパッチを適用できる時期と、ノードを並べ替えまたは再作成する必要がある時期を識別します。 詳細については、次のセクションを参照してください。
16
+ 特別な属性である ` key ` はノードの ID を追跡するために Vue の仮想 DOM のアルゴリズムのヒントとして使用されます。 こうすることで Vue は既存のノードを再利用してパッチを適用できる時期と、ノードを並べ替えまたは再作成する必要がある時期を識別します。 詳細については、次のセクションを参照してください。
17
17
18
18
- [ リストレンダリング: 状態の維持] ( /guide/list.html#maintaining-state )
19
19
- [ API リファレンス: 特別な属性 ` key ` ] ( /api/special-attributes.html#key )
@@ -28,15 +28,15 @@ Vue 2.x では、`v-if` / `v-else` / `v-else-if` 分岐で `key` を使用する
28
28
<div v-else key =" no" >No</div >
29
29
```
30
30
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 ` が自動的に生成されるようになったためです。
32
32
33
33
``` html
34
34
<!-- Vue 3.x -->
35
35
<div v-if =" condition" >Yes</div >
36
36
<div v-else >No</div >
37
37
```
38
38
39
- 重大な変更は手動で ` key ` を指定する場合、各分岐は一意となる ` key ` を使用する必要があることです。ほとんどの場合、これらの ` key ` は削除できます。
39
+ 破壊的変更は、手動で ` key ` を指定する場合、各分岐に一意となる ` key ` を使用する必要があることです。ほとんどの場合、これらの ` key ` は削除できます。
40
40
41
41
``` html
42
42
<!-- Vue 2.x -->
You can’t perform that action at this time.
0 commit comments