From f7488094699fcac39d2d45a311f8b58a1bdd0d1d Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Thu, 6 May 2021 20:30:20 +0900 Subject: [PATCH 1/4] docs: shallow unwrap on setup https://github.com/vuejs/docs-next/commit/3e5e52e9fdd3abbaab19849dc0dd81752d216216#diff-55ff289006ef954900bf36417b8e59c1586919dd6ca8d8047d053517cacb8a97 --- src/guide/reactivity-fundamentals.md | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/guide/reactivity-fundamentals.md b/src/guide/reactivity-fundamentals.md index f8f5a0ad..fa4d2c0c 100644 --- a/src/guide/reactivity-fundamentals.md +++ b/src/guide/reactivity-fundamentals.md @@ -45,13 +45,14 @@ console.log(count.value) // 1 ### ref のアンラップ -ref がレンダーコンテキスト(render contenxt - [setup()](composition-api-setup.html) によって返されるオブジェクト)のプロパティとして返されていてテンプレート内でアクセスされる場合、自動的に内部の値にアンラップ(ref でラップされた値を取り出す)されます。テンプレート内においては `.value` を付ける必要はありません: +ref がレンダーコンテキスト(render contenxt - [setup()](composition-api-setup.html) によって返されるオブジェクト)のプロパティとして返されていてテンプレート内でアクセスされる場合、自動的に内部の値に浅くアンラップ(ref でラップされた値を取り出す)されます。ネストした ref だけが、テンプレート内で `.value` が必要です: ```vue-html @@ -61,13 +62,27 @@ ref がレンダーコンテキスト(render contenxt - [setup()](composition-ap setup() { const count = ref(0) return { - count + count, + + nested: { + count + } } } } ``` +::tip + If you don't need to access the actual object instance, you can wrap it in a reactive: + + ```js + rested: reactive({ + count + }) + ``` +:: + ### リアクティブオブジェクト内でのアクセス `ref` がリアクティブオブジェクトのプロパティとしてアクセスまたは更新される際に、自動的に内部の値にアンラップされて通常のプロパティのように振る舞います: From 856187c19a9a93743814b9e4fb02a9257251db9b Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Thu, 6 May 2021 20:31:16 +0900 Subject: [PATCH 2/4] chore: fix typos https://github.com/vuejs/docs-next/commit/d7b0ca0da562cbb2e5bf015607d008b6ed178ade#diff-55ff289006ef954900bf36417b8e59c1586919dd6ca8d8047d053517cacb8a97 --- src/guide/reactivity-fundamentals.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/guide/reactivity-fundamentals.md b/src/guide/reactivity-fundamentals.md index fa4d2c0c..8cff3f02 100644 --- a/src/guide/reactivity-fundamentals.md +++ b/src/guide/reactivity-fundamentals.md @@ -73,15 +73,15 @@ ref がレンダーコンテキスト(render contenxt - [setup()](composition-ap ``` -::tip +:::tip If you don't need to access the actual object instance, you can wrap it in a reactive: ```js - rested: reactive({ + nested: reactive({ count }) ``` -:: +::: ### リアクティブオブジェクト内でのアクセス From fa4aca01a989ea1c61a65ab3718c3f004f477b17 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Thu, 6 May 2021 20:31:52 +0900 Subject: [PATCH 3/4] fix: correct a couple of typos in reactivity-fundamentals.md https://github.com/vuejs/docs-next/commit/f9828e0e2768fca4e0653fec7217792b3e3be361#diff-55ff289006ef954900bf36417b8e59c1586919dd6ca8d8047d053517cacb8a97 --- src/guide/reactivity-fundamentals.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/guide/reactivity-fundamentals.md b/src/guide/reactivity-fundamentals.md index 8cff3f02..53cc0055 100644 --- a/src/guide/reactivity-fundamentals.md +++ b/src/guide/reactivity-fundamentals.md @@ -74,13 +74,13 @@ ref がレンダーコンテキスト(render contenxt - [setup()](composition-ap ``` :::tip - If you don't need to access the actual object instance, you can wrap it in a reactive: +If you don't need to access the actual object instance, you can wrap it in a `reactive`: - ```js - nested: reactive({ - count - }) - ``` +```js +nested: reactive({ + count +}) +``` ::: ### リアクティブオブジェクト内でのアクセス From 993158edf4280044788c79754dbd9a4b30fd5e8c Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Thu, 6 May 2021 21:23:03 +0900 Subject: [PATCH 4/4] docs: translate reactivity fundamentals page --- src/guide/reactivity-fundamentals.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/guide/reactivity-fundamentals.md b/src/guide/reactivity-fundamentals.md index 53cc0055..cc8d6166 100644 --- a/src/guide/reactivity-fundamentals.md +++ b/src/guide/reactivity-fundamentals.md @@ -17,11 +17,11 @@ const state = reactive({ Vue におけるリアクティブな状態の重要なユースケースは描画の際に用いることができることです。依存関係の追跡のおかげで、リアクティブな状態が変化するとビューが自動的に更新されます。 -これがまさに Vue のリアクティブシステムの本質です。コンポーネント内の `data()` でオブジェクトを返す際に、内部的には `reactive()` によってリアクティブを実現しています。テンプレートはこれらのリアクティブなプロパティを利用する [render 関数](render-function.html)にコンパイルされます。 +これがまさに Vue のリアクティブシステムの本質です。コンポーネント内の `data()` でオブジェクトを返す際に、内部的には `reactive()` によってリアクティブを実現しています。テンプレートはこれらのリアクティブなプロパティを利用する [Render 関数](render-function.html)にコンパイルされます。 -`reactive` についての詳細は [基本 リアクティビティ API](../api/basic-reactivity.html) セクションを参照してください +`reactive` についての詳細は [基本リアクティビティ API](../api/basic-reactivity.html) セクションを参照してください -## 独立したリアクティブな値を `参照` として作成する +## 独立したリアクティブな値を `ref` として作成する 独立したプリミティブ値(例えば文字列)があって、それをリアクティブにしたい場合を想像してみてください。もちろん、同じ値の文字列を単一のプロパティとして持つオブジェクトを作成して `reactive` に渡すこともできます。Vue にはこれと同じことをしてくれる `ref` メソッドがあります: @@ -45,7 +45,7 @@ console.log(count.value) // 1 ### ref のアンラップ -ref がレンダーコンテキスト(render contenxt - [setup()](composition-api-setup.html) によって返されるオブジェクト)のプロパティとして返されていてテンプレート内でアクセスされる場合、自動的に内部の値に浅くアンラップ(ref でラップされた値を取り出す)されます。ネストした ref だけが、テンプレート内で `.value` が必要です: +ref がレンダーコンテキスト(render contenxt - [setup()](composition-api-setup.html) によって返されるオブジェクト)のプロパティとして返されていてテンプレート内でアクセスされる場合、自動的に内部の値に浅くアンラップ(ref でラップされた値を取り出す)されます。入れ子になった ref だけが、テンプレート内で `.value` が必要です: ```vue-html