Skip to content

Migration > Key Attribute の翻訳を追従 #262

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 17, 2021
Merged

Migration > Key Attribute の翻訳を追従 #262

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions src/guide/migration/key-attribute.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,27 +8,27 @@ badges:
## 概要

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

## 背景

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

- [リストレンダリング: 状態の維持](/guide/list.html#maintaining-state)
- [API リファレンス: 特別な属性 `key` ](/api/special-attributes.html#key)
- [API リファレンス: 特別な属性 `key`](/api/special-attributes.html#key)

## 条件分岐について

Vue 2.x では、`v-if` / `v-else` / `v-else-if` 分岐で `key` を使用することが推奨されていました。
Vue 2.x では、`v-if`/`v-else`/`v-else-if` 分岐で `key` を使用することが推奨されていました。

```html
<!-- Vue 2.x -->
<div v-if="condition" key="yes">Yes</div>
<div v-else key="no">No</div>
```

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

```html
<!-- Vue 3.x -->
Expand All @@ -54,7 +54,7 @@ Vue 2.x では、`v-if` / `v-else` / `v-else-if` 分岐で `key` を使用する

## `<template v-for>` の使用

Vue 2.x では、`<template>` タグに `key` を含めることができませんでした。 代わりに、それぞれの子要素に `key` を配置できます。
Vue 2.x では、`<template>` タグに `key` を含めることができませんでした。代わりに、それぞれの子要素に `key` を配置できます。

```html
<!-- Vue 2.x -->
Expand Down Expand Up @@ -88,4 +88,4 @@ Vue 3.x では、`key` を `<template>` タグに配置する必要がありま
<div v-if="item.isVisible">...</div>
<span v-else>...</span>
</template>
```
```