@@ -17,11 +17,11 @@ const state = reactive({
17
17
18
18
Vue におけるリアクティブな状態の重要なユースケースは描画の際に用いることができることです。依存関係の追跡のおかげで、リアクティブな状態が変化するとビューが自動的に更新されます。
19
19
20
- これがまさに Vue のリアクティブシステムの本質です。コンポーネント内の ` data() ` でオブジェクトを返す際に、内部的には ` reactive() ` によってリアクティブを実現しています。テンプレートはこれらのリアクティブなプロパティを利用する [ render 関数] ( render-function.html ) にコンパイルされます。
20
+ これがまさに Vue のリアクティブシステムの本質です。コンポーネント内の ` data() ` でオブジェクトを返す際に、内部的には ` reactive() ` によってリアクティブを実現しています。テンプレートはこれらのリアクティブなプロパティを利用する [ Render 関数] ( render-function.html ) にコンパイルされます。
21
21
22
- ` reactive ` についての詳細は [ 基本 リアクティビティ API] ( ../api/basic-reactivity.html ) セクションを参照してください
22
+ ` reactive ` についての詳細は [ 基本リアクティビティ API] ( ../api/basic-reactivity.html ) セクションを参照してください
23
23
24
- ## 独立したリアクティブな値を ` 参照 ` として作成する
24
+ ## 独立したリアクティブな値を ` ref ` として作成する
25
25
26
26
独立したプリミティブ値(例えば文字列)があって、それをリアクティブにしたい場合を想像してみてください。もちろん、同じ値の文字列を単一のプロパティとして持つオブジェクトを作成して ` reactive ` に渡すこともできます。Vue にはこれと同じことをしてくれる ` ref ` メソッドがあります:
27
27
@@ -45,7 +45,7 @@ console.log(count.value) // 1
45
45
46
46
### ref のアンラップ
47
47
48
- ref がレンダーコンテキスト(render contenxt - [ setup()] ( composition-api-setup.html ) によって返されるオブジェクト)のプロパティとして返されていてテンプレート内でアクセスされる場合、自動的に内部の値に浅くアンラップ(ref でラップされた値を取り出す)されます。ネストした ref だけが、テンプレート内で ` .value ` が必要です:
48
+ ref がレンダーコンテキスト(render contenxt - [ setup()] ( composition-api-setup.html ) によって返されるオブジェクト)のプロパティとして返されていてテンプレート内でアクセスされる場合、自動的に内部の値に浅くアンラップ(ref でラップされた値を取り出す)されます。入れ子になった ref だけが、テンプレート内で ` .value ` が必要です:
49
49
50
50
``` vue-html
51
51
<template>
@@ -74,7 +74,7 @@ ref がレンダーコンテキスト(render contenxt - [setup()](composition-ap
74
74
```
75
75
76
76
::: tip
77
- If you don't need to access the actual object instance, you can wrap it in a ` reactive ` :
77
+ 実際のオブジェクトインスタンスにアクセスする必要がない場合は、 ` reactive ` でラップできます :
78
78
79
79
``` js
80
80
nested: reactive ({
@@ -162,7 +162,7 @@ console.log(book.title) // 'Vue 3 Detailed Guide'
162
162
163
163
## ` readonly ` でリアクティブオブジェクトの変更を防ぐ
164
164
165
- リアクティブオブジェクト(` ref ` や ` reactive ` )の変更を追跡しながらも、アプリケーションのある場所からの変更は防ぎたい場合があります。例えば、[ provide ] ( component-provide-inject.html ) されたリアクティブオブジェクトがある場合、それが注入された場所からの変更は防ぎたいことがあります。そうするために、元のオブジェクトに対する読み取り専用のプロキシを作成します:
165
+ リアクティブオブジェクト(` ref ` や ` reactive ` )の変更を追跡しながらも、アプリケーションのある場所からの変更は防ぎたい場合があります。例えば、[ Provide ] ( component-provide-inject.html ) されたリアクティブオブジェクトがある場合、それが注入された場所からの変更は防ぎたいことがあります。そうするために、元のオブジェクトに対する読み取り専用のプロキシを作成します:
166
166
167
167
``` js
168
168
import { reactive , readonly } from ' vue'
0 commit comments