@@ -8,27 +8,27 @@ 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
- - [ API リファレンス: 特別な属性 ` key ` ] ( /api/special-attributes.html#key )
19
+ - [ API リファレンス: 特別な属性 ` key ` ] ( /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 -->
27
27
<div v-if =" condition" key =" yes" >Yes</div >
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 -->
@@ -54,7 +54,7 @@ Vue 2.x では、`v-if` / `v-else` / `v-else-if` 分岐で `key` を使用する
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 -->
@@ -88,4 +88,4 @@ Vue 3.x では、`key` を `<template>` タグに配置する必要がありま
88
88
<div v-if =" item.isVisible" >...</div >
89
89
<span v-else >...</span >
90
90
</template >
91
- ```
91
+ ```
0 commit comments