From 468db857f3d892530ef5f3dda012b075640a12f3 Mon Sep 17 00:00:00 2001
From: Ryo Matsunami <jane.doe3wtp4649@gmail.com>
Date: Fri, 23 Oct 2020 05:59:09 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Migration=20Guide=20>=20key=20attribute=20?=
 =?UTF-8?q?=E3=81=AE=E7=BF=BB=E8=A8=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/guide/migration/key-attribute.md | 91 ++++++++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 src/guide/migration/key-attribute.md

diff --git a/src/guide/migration/key-attribute.md b/src/guide/migration/key-attribute.md
new file mode 100644
index 00000000..39fe52be
--- /dev/null
+++ b/src/guide/migration/key-attribute.md
@@ -0,0 +1,91 @@
+---
+badges:
+  - breaking
+---
+
+# `key` 属性 <MigrationBadges :badges="$frontmatter.badges" />
+
+## 概要
+
+- **新着:** Vue が一意の `key` を自動的に生成するようになったため、`v-if`/`v-else`/`v-else-if` 分岐で `key` が不要になりました。
+  - **速報:** 手動で `key` を指定する場合、各分岐は一意の `key` を使用する必要があります。 同じ `key` を意図的に使用して分岐を強制的に再利用することはできなくなりました。
+- **速報:** `<template v-for>` における `key` は、`<template>` タグに配置する必要があります（子の要素ではない）
+
+## 背景
+
+`key` 属性はノードの ID を追跡するために Vue の仮想 DOM のアルゴリズムのヒントとして使用されます。 こうすることで Vue は既存のノードを再利用してパッチを適用できる時期と、ノードを並べ替えまたは再作成する必要がある時期を識別します。 詳細については、次のセクションを参照してください。
+
+- [リストレンダリング: 状態の維持](/guide/list.html#maintaining-state)
+- [API リファレンス: 特別な属性 `key` ](/api/special-attributes.html#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` が自動的に生成されるようになったためです。
+
+```html
+<!-- Vue 3.x -->
+<div v-if="condition">Yes</div>
+<div v-else>No</div>
+```
+
+重大な変更は手動で `key` を指定する場合、各分岐は一意となる `key` を使用する必要があることです。ほとんどの場合、これらの `key` は削除できます。
+
+```html
+<!-- Vue 2.x -->
+<div v-if="condition" key="a">Yes</div>
+<div v-else key="a">No</div>
+
+<!-- Vue 3.x (推奨される解決策：key を削除する) -->
+<div v-if="condition">Yes</div>
+<div v-else>No</div>
+
+<!-- Vue 3.x (別の解決策：key が常に一意であることを確認してください) -->
+<div v-if="condition" key="a">Yes</div>
+<div v-else key="b">No</div>
+```
+
+## `<template v-for>` の使用
+
+Vue 2.x では、`<template>` タグに `key` を含めることができませんでした。 代わりに、それぞれの子要素に `key` を配置できます。
+
+```html
+<!-- Vue 2.x -->
+<template v-for="item in list">
+  <div :key="item.id">...</div>
+  <span :key="item.id">...</span>
+</template>
+```
+
+Vue 3.x では、`key` を `<template>` タグに配置する必要があります。
+
+```html
+<!-- Vue 3.x -->
+<template v-for="item in list" :key="item.id">
+  <div>...</div>
+  <span>...</span>
+</template>
+```
+
+同様に、子要素が `v-if` を使用する `<template v-for>` を使用する場合、`key` は `<template>` タグに移動する必要があります。
+
+```html
+<!-- Vue 2.x -->
+<template v-for="item in list">
+  <div v-if="item.isVisible" :key="item.id">...</div>
+  <span v-else :key="item.id">...</span>
+</template>
+
+<!-- Vue 3.x -->
+<template v-for="item in list" :key="item.id">
+  <div v-if="item.isVisible">...</div>
+  <span v-else>...</span>
+</template>
+```
\ No newline at end of file

From d05ecfdbaaa3e183ab13f5ca422c3763fd157bb1 Mon Sep 17 00:00:00 2001
From: Ryo Matsunami <jane.doe3wtp4649@gmail.com>
Date: Tue, 27 Oct 2020 05:04:39 +0900
Subject: [PATCH 2/2] =?UTF-8?q?review=E6=8C=87=E6=91=98=E5=AF=BE=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/guide/migration/key-attribute.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/guide/migration/key-attribute.md b/src/guide/migration/key-attribute.md
index 39fe52be..64abdca8 100644
--- a/src/guide/migration/key-attribute.md
+++ b/src/guide/migration/key-attribute.md
@@ -8,12 +8,12 @@ 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)
@@ -28,7 +28,7 @@ Vue 2.x では、`v-if` / `v-else` / `v-else-if` 分岐で `key` を使用する
 <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 -->
@@ -36,7 +36,7 @@ Vue 2.x では、`v-if` / `v-else` / `v-else-if` 分岐で `key` を使用する
 <div v-else>No</div>
 ```
 
-重大な変更は手動で `key` を指定する場合、各分岐は一意となる `key` を使用する必要があることです。ほとんどの場合、これらの `key` は削除できます。
+破壊的変更は、手動で `key` を指定する場合、各分岐に一意となる `key` を使用する必要があることです。ほとんどの場合、これらの `key` は削除できます。
 
 ```html
 <!-- Vue 2.x -->