From 8337e023da99a6f58d872495087c32b7820d3b99 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Mon, 26 Apr 2021 20:15:38 +0900 Subject: [PATCH 1/8] Note that props can be accessed in template directly https://github.com/vuejs/docs-next/commit/c05b8e66bcf1e8c614e4569c43b20df5249b864f#diff-861c883c19deb5fffdbcbaf69ecc06bab99f7f21c623d3ea197fa227826b5c05 --- src/guide/composition-api-setup.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/guide/composition-api-setup.md b/src/guide/composition-api-setup.md index 81eca32d..f096960d 100644 --- a/src/guide/composition-api-setup.md +++ b/src/guide/composition-api-setup.md @@ -99,19 +99,19 @@ export default { ## テンプレートでの使用 -`setup` がオブジェクトを返す場合、コンポーネントのテンプレート内でオブジェクトのプロパティにアクセスすることができます。: +`setup` がオブジェクトを返す場合、コンポーネントのテンプレート内でオブジェクトのプロパティにアクセスすることができ、 `setup` に渡された `props` のプロパティも同じようにアクセスできます: ```vue-html ``` -`setup` から返された [refs](../api/refs-api.html#ref) は、テンプレート内でアクセスされたときに[自動的にアンラップ](../api/refs-api.html#access-in-templates)されるので、テンプレート内で `.value` を使用すべきではないことに注意してください。 +`setup` から返された [refs](../api/refs-api.html#ref) は、テンプレート内でアクセスされたときに[自動的にアンラップ](/guide/reactivity-fundamentals.html#ref-のアンラップ)されるので、テンプレート内で `.value` を使用すべきではないことに注意してください。 ## 描画関数での使用 From bc2af46edf36debe1f11f1aec23e723d6ff11c29 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Mon, 26 Apr 2021 20:35:15 +0900 Subject: [PATCH 3/8] Resolve props template usage composition api https://github.com/vuejs/docs-next/commit/c84c5f304c37436ea0f50d2299593a61ecc652c2#diff-861c883c19deb5fffdbcbaf69ecc06bab99f7f21c623d3ea197fa227826b5c05 --- src/guide/composition-api-setup.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/guide/composition-api-setup.md b/src/guide/composition-api-setup.md index c412ae2d..379335c8 100644 --- a/src/guide/composition-api-setup.md +++ b/src/guide/composition-api-setup.md @@ -104,13 +104,16 @@ export default { ```vue-html ``` -`setup` から返された [refs](../api/refs-api.html#ref) は、テンプレート内でアクセスされたときに[自動的にアンラップ](/guide/reactivity-fundamentals.html#ref-のアンラップ)されるので、テンプレート内で `.value` を使用すべきではないことに注意してください。 +`setup` から返された [refs](../api/refs-api.html#ref) は、テンプレート内でアクセスされたときに[自動的に浅いアンラップ](/guide/reactivity-fundamentals.html#ref-のアンラップ)されるので、テンプレート内で `.value` を使用すべきではないことに注意してください。 ## 描画関数での使用 From f46949d1764ac7e3187232da15c3427226403b14 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Mon, 26 Apr 2021 21:11:51 +0900 Subject: [PATCH 6/8] fix: missing anchor link --- src/guide/composition-api-setup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/composition-api-setup.md b/src/guide/composition-api-setup.md index 85899aa3..dbee1685 100644 --- a/src/guide/composition-api-setup.md +++ b/src/guide/composition-api-setup.md @@ -34,7 +34,7 @@ export default { しかし、`props` はリアクティブなので、**ES6 の分割代入を使うことができません。** props のリアクティブを削除してしまうからです。 ::: -もし、props を分割代入する必要がある場合は、`setup` 関数内で [toRefs](reactivity-fundamentals.html#destructuring-reactive-state) を使うことによって分割代入を行うことができます: +もし、props を分割代入する必要がある場合は、`setup` 関数内で [toRefs](reactivity-fundamentals.html#リアクティブな状態の分割代入) を使うことによって分割代入を行うことができます: ```js // MyBook.vue From d79696a04be9a1d7813246187b264b049bbdf875 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Mon, 26 Apr 2021 21:13:10 +0900 Subject: [PATCH 7/8] fix: follow spelling inconsistencies ruls #94 --- src/guide/composition-api-setup.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/guide/composition-api-setup.md b/src/guide/composition-api-setup.md index dbee1685..1b40ae36 100644 --- a/src/guide/composition-api-setup.md +++ b/src/guide/composition-api-setup.md @@ -1,12 +1,12 @@ # セットアップ -> このセクションではコード例に[単一ファイルコンポーネント](single-file-component.html)のシンタックスを使います。 +> このセクションではコード例に[単一ファイルコンポーネント](single-file-component.html)の構文を使います。 -> このガイドは[コンポジション API の導入](composition-api-introduction.html)と[リアクティブの基礎](reactivity-fundamentals.html)を既に読んでいることを想定しています。 コンポジション API に初めて触れる方は、まずそちらを読んでみてください。 +> このガイドは[Composition API の導入](composition-api-introduction.html)と[リアクティブの基礎](reactivity-fundamentals.html)を既に読んでいることを想定しています。 Composition API に初めて触れる方は、まずそちらを読んでみてください。 ## 引数 -`setup` 関数を使う時、2 つの引数を取ります: +`setup` 関数を使う時、2つの引数を取ります: 1. `props` 2. `context` @@ -15,7 +15,7 @@ ### プロパティ -`setup` 関数の 第一引数は `props` 引数です。 標準コンポーネントで期待するように、`setup` 関数内の `props` はリアクティブで、新しい props が渡されたら更新されます。 +`setup` 関数の第1引数は `props` 引数です。 標準コンポーネントで期待するように、`setup` 関数内の `props` はリアクティブで、新しい props が渡されたら更新されます。 ```js // MyBook.vue @@ -64,7 +64,7 @@ setup(props) { ### コンテキスト -`setup` 関数に渡される第二引数は `context` です。`context` は 3 つのコンポーネントプロパティを公開する一般的な JavaScript オブジェクトです。: +`setup` 関数に渡される第2引数は `context` です。`context` は3つのコンポーネントプロパティを公開する一般的な JavaScript オブジェクトです。: ```js // MyBook.vue @@ -83,7 +83,7 @@ export default { } ``` -`context` オブジェクトは一般的な JavaScript オブジェクトです。 すなわち、リアクティブではありません。これは `context` で ES6 分割代入を安全に使用できることを意味します。 +`context` オブジェクトは一般的な JavaScript オブジェクトです。すなわち、リアクティブではありません。これは `context` で ES6 分割代入を安全に使用できることを意味します。 ```js // MyBook.vue @@ -98,14 +98,14 @@ export default { ## コンポーネントプロパティへのアクセス -`setup` が実行されるとき、 コンポーネントインスタンスはまだ作成されていません。そのため、以下のプロパティにのみアクセスすることができます。: +`setup` が実行されるとき、 コンポーネントインスタンスはまだ作成されていません。そのため、以下のプロパティにのみアクセスすることができます: - `props` - `attrs` - `slots` - `emit` -言い換えると、以下のコンポーネントオプションには**アクセスできません**。: +言い換えると、以下のコンポーネントオプションには**アクセスできません**: - `data` - `computed` @@ -144,9 +144,9 @@ export default { `setup` から返された [refs](../api/refs-api.html#ref) は、テンプレート内でアクセスされたときに[自動的に浅いアンラップ](/guide/reactivity-fundamentals.html#ref-のアンラップ)されるので、テンプレート内で `.value` を使用すべきではないことに注意してください。 -## 描画関数での使用 +## レンダリング関数での使用 -`setup` は同じスコープで宣言されたリアクティブなステートを直接利用することができる描画関数を返すこともできます。: +`setup` は同じスコープで宣言されたリアクティブなステートを直接利用することができるレンダリング関数を返すこともできます: ```js // MyBook.vue From 06875de54a12ccc0329a846a8486989d01a60288 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Tue, 27 Apr 2021 21:03:23 +0900 Subject: [PATCH 8/8] fix: translate 'render function' --- src/api/application-config.md | 2 +- src/guide/custom-directive.md | 4 ++-- src/guide/migration/transition.md | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/api/application-config.md b/src/api/application-config.md index 85a60d36..24fe9cea 100644 --- a/src/api/application-config.md +++ b/src/api/application-config.md @@ -38,7 +38,7 @@ app.config.errorHandler = (err, vm, info) => { } ``` -コンポーネントの描画関数とウォッチャーに捕捉されなかったエラーのハンドラを割り当てます。ハンドラには、アプリケーションのインスタンスとエラーが渡されて呼び出されます。 +コンポーネントの Render 関数とウォッチャに捕捉されなかったエラーのハンドラを割り当てます。ハンドラには、アプリケーションのインスタンスとエラーが渡されて呼び出されます。 > エラートラッキングサービスの [Sentry](https://sentry.io/for/vue/) ならびに [Bugsnag](https://docs.bugsnag.com/platforms/browsers/vue/) は公式に連携のためのオプションを用意しています。 diff --git a/src/guide/custom-directive.md b/src/guide/custom-directive.md index ef5652f1..81d5a8d2 100644 --- a/src/guide/custom-directive.md +++ b/src/guide/custom-directive.md @@ -52,7 +52,7 @@ directives: { - `beforeUpdate`: 束縛された要素を含むコンポーネントの VNode が更新される前に呼ばれます。 :::tip Note -VNodes は[後で](render-function.html#the-virtual-dom-tree)詳細に扱います。描画関数を説明する時です。 +VNodes は[後で](render-function.html#the-virtual-dom-tree)詳細に扱います。Render 関数を説明する時です。 ::: - `updated`: 束縛された要素を含むコンポーネントの VNode **とその子コンポーネントの VNode** が更新された後に呼ばれます。 @@ -212,7 +212,7 @@ return withDirectives(h('div'), [[vDemo, test]]) ここで `vDemo` はユーザによって記述されたディレクティブオブジェクトで、それは `mounted` や `updated` のフック関数を含みます。 -`withDirectives` は複製した VNode を返します。複製された VNode は VNode のライフサイクルフック (詳細は[描画関数](render-function.html)を参照) としてラップ、注入されたユーザのフック関数を持ちます: +`withDirectives` は複製した VNode を返します。複製された VNode は VNode のライフサイクルフック (詳細は[Render 関数](render-function.html)を参照) としてラップ、注入されたユーザのフック関数を持ちます: ```js { diff --git a/src/guide/migration/transition.md b/src/guide/migration/transition.md index 9c07ed0a..0d9c5cb4 100644 --- a/src/guide/migration/transition.md +++ b/src/guide/migration/transition.md @@ -52,8 +52,8 @@ v2.1.8 では `v-enter-to` トランジションクラスを導入して、 ente `` コンポーネントの関連するプロップ名も変更されます。 -- `leave-class` は `leave-from-class` に名前が変更されます。（描画関数や JSX では `leaveFromClass` と書くことができます） -- `enter-class` は `enter-from-class` に名前が変更されます。（描画関数や JSX では `leaveFromClass` と書くことができます） +- `leave-class` は `leave-from-class` に名前が変更されます。（Render 関数や JSX では `leaveFromClass` と書くことができます） +- `enter-class` は `enter-from-class` に名前が変更されます。（Render 関数や JSX では `leaveFromClass` と書くことができます） ## 移行の戦略