Merge branch 'lang-ja' into translate-data-option

Author: nalpan

src/.vuepress/config.js

@@ -111,6 +111,7 @@ const sidebar = {
       collapsable: true,
       children: [
         'migration/introduction',
+        'migration/array-refs',
         'migration/async-components',
         'migration/attribute-coercion',
         'migration/custom-directives',
@@ -127,7 +128,8 @@ const sidebar = {
         'migration/render-function-api',
         'migration/slots-unification',
         'migration/transition',
-        'migration/v-model'
+        'migration/v-model',
+        'migration/v-bind'
       ]
     },
     {

src/guide/migration/array-refs.md

@@ -0,0 +1,69 @@
+---
+title:  v-forのref配列
+badges:
+- breaking
+---
+
+# {{ $frontmatter.title }} <MigrationBadges :badges="$frontmatter.badges" />
+
+Vue 2 では、`v-for` の中で `ref` 属性を記述すると、対応する `$refs` プロパティに参照の配列を入れます。この動作は、入れ子になった `v-for` がある場合、曖昧で非効率的になります。
+
+Vue 3 では、この記述では `$refs` に配列が作成されなくなりました。１つのバインディングから複数の参照を取得するには、関数に `ref` をバインドします (これは新機能です)。
+
+```html
+<div v-for="item in list" :ref="setItemRef"></div>
+```
+
+オプション API を使う場合
+
+```js
+export default {
+  data() {
+    return {
+      itemRefs: []
+    }
+  },
+  methods: {
+    setItemRef(el) {
+      this.itemRefs.push(el)
+    }
+  },
+  beforeUpdate() {
+    this.itemRefs = []
+  },
+  updated() {
+    console.log(this.itemRefs)
+  }
+}
+```
+
+コンポジション API を使う場合
+
+```js
+import { ref, onBeforeUpdate, onUpdated } from 'vue'
+
+export default {
+  setup() {
+    let itemRefs = []
+    const setItemRef = el => {
+      itemRefs.push(el)
+    }
+    onBeforeUpdate(() => {
+      itemRefs = []
+    })
+    onUpdated(() => {
+      console.log(itemRefs)
+    })
+    return {
+      itemRefs,
+      setItemRef
+    }
+  }
+}
+```
+
+注意点
+
+- `itemRefs` は配列である必要はありません。 反復キーで参照できるオブジェクトでも構いません。
+
+- これにより、必要に応じて `itemRefs` をリアクティブにして監視することもできます。

src/guide/migration/async-components.md

@@ -3,27 +3,27 @@ badges:
   - new
 ---
 
-# Async Components <MigrationBadges :badges="$frontmatter.badges" />
+# 非同期コンポーネント <MigrationBadges :badges="$frontmatter.badges" />
 
-## Overview
+## 概要
 
-Here is a high level overview of what has changed:
+こちらが大まかな変更の概要です:
 
-- New `defineAsyncComponent` helper method that explicitly defines async components
-- `component` option renamed to `loader`
-- Loader function does not inherently receive `resolve` and `reject` arguments and must return a Promise
+- 明示的に非同期コンポーネントを定義する、新しい `defineAsyncComponent` ヘルパーメソッド
+- `component` オプションは `loader` に名前が替わりました
+- loader 関数は本質的に `resolve` と `reject` を引数にとらず、必ず Promise を返却します
 
-For a more in-depth explanation, read on!
+さらに詳しい説明のために読み進めましょう！
 
-## Introduction
+## イントロダクション
 
-Previously, async components were created by simply defining a component as a function that returned a promise, such as:
+以前、非同期コンポーネントは Promise を返す関数としてコンポーネントを定義することで、このように簡単に作成されました:
 
 ```js
 const asyncPage = () => import('./NextPage.vue')
 ```
 
-Or, for the more advanced component syntax with options:
+または、オプション付きのさらに高度なコンポーネント構文として:
 
 ```js
 const asyncPage = {
@@ -35,19 +35,19 @@ const asyncPage = {
 }
 ```
 
-## 3.x Syntax
+## 3.x での構文
 
-Now, in Vue 3, since functional components are defined as pure functions, async components definitions need to be explicitly defined by wrapping it in a new `defineAsyncComponent` helper:
+現在、Vue 3 では、関数型コンポーネントは純粋関数として定義されるので、非同期コンポーネントは新しい `defineAsyncComponent` ヘルパーでラップして定義する必要があります:
 
 ```js
 import { defineAsyncComponent } from 'vue'
 import ErrorComponent from './components/ErrorComponent.vue'
 import LoadingComponent from './components/LoadingComponent.vue'
 
-// Async component without options
+// オプションなしの非同期コンポーネント
 const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))
 
-// Async component with options
+// オプション付きの非同期コンポーネント
 const asyncPageWithOptions = defineAsyncComponent({
   loader: () => import('./NextPage.vue'),
   delay: 200,
@@ -57,7 +57,7 @@ const asyncPageWithOptions = defineAsyncComponent({
 })
 ```
 
-Another change that has been made from 2.x is that the `component` option is now renamed to `loader` in order to accurately communicate that a component definition cannot be provided directly.
+2.x からなされたもう一つの変更は、直接コンポーネント定義を提供できないことを正確に伝えるために `component` オプションの名前が `loader` に替わったことです。
 
 ```js{4}
 import { defineAsyncComponent } from 'vue'
@@ -71,7 +71,7 @@ const asyncPageWithOptions = defineAsyncComponent({
 })
 ```
 
-In addition, unlike 2.x, the loader function no longer receives the `resolve` and `reject` arguments and must always return a Promise.
+加えて、2.x とは異なり、loader 関数はもう `resolve` と `reject` を引数にとらず、常に Promise を返します。
 
 ```js
 // 2.x version
@@ -88,6 +88,6 @@ const asyncComponent = defineAsyncComponent(
 )
 ```
 
-For more information on the usage of async components, see:
+非同期コンポーネントの使い方のさらなる情報は、以下を見てください:
 
-- [Guide: Dynamic & Async Components](/guide/component-dynamic-async.html#dynamic-components-with-keep-alive)
+- [ガイド: 動的 & 非同期コンポーネント](/guide/component-dynamic-async.html#動的コンポーネントにおける-keep-alive-の利用)