1
- # Basic Reactivity APIs
1
+ # 基本のリアクティビティ API
2
2
3
- > This section uses [ single-file component ] ( ../guide/single-file-component.html ) syntax for code examples
3
+ > このセクションでは、コード例に [ 単一ファイルコンポーネント ] ( ../guide/single-file-component.html ) 構文を使用します
4
4
5
5
## ` reactive `
6
6
7
- Returns a reactive copy of the object.
7
+ オブジェクトのリアクティブなコピーを返します。
8
8
9
9
``` js
10
10
const obj = reactive ({ count: 0 })
11
11
```
12
12
13
- The reactive conversion is "deep"—it affects all nested properties. In the [ ES2015 Proxy] ( https://developer.mozilla.org/en-US /docs/Web/JavaScript/Reference/Global_Objects/Proxy ) based implementation, the returned proxy is ** not ** equal to the original object. It is recommended to work exclusively with the reactive proxy and avoid relying on the original object.
13
+ リアクティブの変換は「ディープ」で、ネストされたすべてのプロパティに影響します。 [ ES2015 Proxy] ( https://developer.mozilla.org/ja /docs/Web/JavaScript/Reference/Global_Objects/Proxy ) ベースの実装では、返されたプロキシは元のオブジェクトとは等しく ** ありません ** 。元のオブジェクトに依存せず、リアクティブプロキシのみで作業することをお勧めします。
14
14
15
- ** Typing :**
15
+ ** 型 :**
16
16
17
17
``` ts
18
18
function reactive<T extends object >(target : T ): UnwrapNestedRefs <T >
19
19
```
20
20
21
21
::: tip Note
22
- ` reactive ` will unwrap all the deep [ refs ](./ refs - api .html #ref ), while maintaining the ref reactivity
22
+ ` reactive ` は、 ref のリアクティビティを維持しながら、全ての深さの [ ref ](./ refs - api .html #ref ) をアンラップします
23
23
24
24
` ` ` ts
25
25
const count = ref(1)
26
26
const obj = reactive({ count })
27
27
28
- // ref will be unwrapped
28
+ // ref はアンラップされる
29
29
console.log(obj.count === count.value) // true
30
30
31
- // it will update ` obj .count `
31
+ // ` obj .count ` が更新される
32
32
count.value++
33
33
console.log(count.value) // 2
34
34
console.log(obj.count) // 2
35
35
36
- // it will also update ` count ` ref
36
+ // ` count ` の ref も更新される
37
37
obj.count++
38
38
console.log(obj.count) // 3
39
39
console.log(count.value) // 3
@@ -42,7 +42,7 @@ console.log(count.value) // 3
42
42
:::
43
43
44
44
::: warning Important
45
- When assigning a [ref ](./ refs - api .html #ref ) to a ` reactive ` property , that ref will be automatically unwrapped .
45
+ ` reactive ` のプロパティに [ref ](./ refs - api .html #ref ) を代入すると、その ref は自動的にアンラップされます。
46
46
47
47
` ` ` ts
48
48
const count = ref(1)
@@ -58,26 +58,26 @@ console.log(obj.count === count.value) // true
58
58
59
59
## ` readonly `
60
60
61
- Takes an object ( reactive or plain ) or a [ref ](./ refs - api .html #ref ) and returns a readonly proxy to the original . A readonly proxy is deep : any nested property accessed will be readonly as well .
61
+ (リアクティブもしくはプレーンな)オブジェクトや [ref ](./ refs - api .html #ref ) を受け取り、オリジナルへの読み取り専用プロキシを返します。読み取り専用プロキシはディープで、つまりネストされたプロパティへのアクセスも同様に読み取り専用となります。
62
62
63
63
` ` ` js
64
64
const original = reactive({ count: 0 })
65
65
66
66
const copy = readonly(original)
67
67
68
68
watchEffect(() => {
69
- // works for reactivity tracking
69
+ // リアクティビティの追跡に機能する
70
70
console.log(copy.count)
71
71
})
72
72
73
- // mutating original will trigger watchers relying on the copy
73
+ // original を変更すると、 copy に依存しているウォッチャがトリガされます
74
74
original.count++
75
75
76
- // mutating the copy will fail and result in a warning
76
+ // copy の変更は失敗し、警告が表示されます
77
77
copy.count++ // warning!
78
78
` ` `
79
79
80
- As with [` reactive ` ](#reactive ), if any property uses a ` ref ` it will be automatically unwrapped when it is accessed via the proxy :
80
+ [` reactive ` ](#reactive ) と同様に、プロパティが ` ref ` を使用している場合、プロキシ経由でアクセスされると自動的にアンラップされます :
81
81
82
82
` ` ` js
83
83
const raw = {
@@ -92,11 +92,11 @@ console.log(copy.count) // 123
92
92
93
93
## ` isProxy `
94
94
95
- Checks if an object is a proxy created by [` reactive ` ](#reactive ) or [` readonly ` ](#readonly ).
95
+ オブジェクトが [` reactive ` ](#reactive ) または [` readonly ` ](#readonly ) で作成されたプロキシかどうかをチェックします。
96
96
97
97
## ` isReactive `
98
98
99
- Checks if an object is a reactive proxy created by [` reactive ` ](#reactive ).
99
+ オブジェクトが [` reactive ` ](#reactive ) で作成されたリアクティブプロキシかどうかをチェックします。
100
100
101
101
` ` ` js
102
102
import { reactive, isReactive } from 'vue'
@@ -110,7 +110,7 @@ export default {
110
110
}
111
111
` ` `
112
112
113
- It also returns ` true ` if the proxy is created by [` readonly ` ](#readonly ), but is wrapping another proxy created by [` reactive ` ](#reactive ).
113
+ また、 [` readonly ` ](#readonly ) で作成されたプロキシが、 [` reactive ` ](#reactive ) で作成された別のプロキシをラップしている場合も ` true ` を返します。
114
114
115
115
` ` ` js{7-15}
116
116
import { reactive, isReactive, readonly } from 'vue'
@@ -119,13 +119,13 @@ export default {
119
119
const state = reactive({
120
120
name: 'John'
121
121
})
122
- // readonly proxy created from plain object
122
+ // プレーンオブジェクトから作成された読み取り専用プロキシ
123
123
const plain = readonly({
124
124
name: 'Mary'
125
125
})
126
126
console.log(isReactive(plain)) // -> false
127
127
128
- // readonly proxy created from reactive proxy
128
+ // リアクティブプロキシから作成された読み取り専用プロキシ
129
129
const stateCopy = readonly(state)
130
130
console.log(isReactive(stateCopy)) // -> true
131
131
}
@@ -134,11 +134,11 @@ export default {
134
134
135
135
## ` isReadonly `
136
136
137
- Checks if an object is a readonly proxy created by [` readonly ` ](#readonly ).
137
+ オブジェクトが [` readonly ` ](#readonly ) で作成された読み取り専用プロキシかどうかをチェックします。
138
138
139
139
## ` toRaw `
140
140
141
- Returns the raw , original object of a [` reactive ` ](#reactive ) or [` readonly ` ](#readonly ) proxy . This is an escape hatch that can be used to temporarily read without incurring proxy access / tracking overhead or write without triggering changes . It is ** not ** recommended to hold a persistent reference to the original object . Use with caution .
141
+ [` reactive ` ](#reactive ) や [` readonly ` ](#readonly ) プロキシの元のオブジェクトを返します。これは、プロキシのアクセス / トラッキングのオーバヘッドを発生させずに一時的に読み込んだり、変更をトリガせずに書き込んだりするために使える避難用ハッチです。元のオブジェクトへの永続的な参照を保持することは推奨 ** されません ** 。注意して使用してください。
142
142
143
143
` ` ` js
144
144
const foo = {}
@@ -149,45 +149,45 @@ console.log(toRaw(reactiveFoo) === foo) // true
149
149
150
150
## ` markRaw `
151
151
152
- Marks an object so that it will never be converted to a proxy . Returns the object itself .
152
+ プロキシに変換されないようにオブジェクトに印をつけます。オブジェクト自体を返します。
153
153
154
154
` ` ` js
155
155
const foo = markRaw({})
156
156
console.log(isReactive(reactive(foo))) // false
157
157
158
- // also works when nested inside other reactive objects
158
+ // 他のリアクティブオブジェクト内にネストされている場合にも機能します
159
159
const bar = reactive({ foo })
160
160
console.log(isReactive(bar.foo)) // false
161
161
` ` `
162
162
163
163
::: warning
164
- ` markRaw ` and the shallowXXX APIs below allow you to selectively opt - out of the default deep reactive / readonly conversion and embed raw , non - proxied objects in your state graph . They can be used for various reasons :
164
+ ` markRaw ` や下記の shallowXXX API を使用すると、デフォルトのディープな reactive / readonly 変換を選択的にオプトアウトして、プロキシされていない生のオブジェクトを状態グラフに埋め込むことができます。これらは様々な理由で使用できます :
165
165
166
- - Some values simply should not be made reactive , for example a complex 3 rd party class instance , or a Vue component object .
166
+ - 例えば、複雑なサードパーティのクラス・インスタンスや Vue のコンポーネント・オブジェクトなど、単純にリアクティブにすべきではない値もあります。
167
167
168
- - Skipping proxy conversion can provide performance improvements when rendering large lists with immutable data sources .
168
+ - プロキシの変換をスキップすることで、イミュータブルなデータソースで大きなリストをレンダリングする際のパフォーマンスを向上させることができます。
169
169
170
- They are considered advanced because the raw opt - out is only at the root level , so if you set a nested , non - marked raw object into a reactive object and then access it again , you get the proxied version back . This can lead to ** identity hazards ** - i . e . performing an operation that relies on object identity but using both the raw and the proxied version of the same object :
170
+ 生のオプトアウトがルートレベルでのみ行われ、ネストされた、マークされていない生のオブジェクトをリアクティブオブジェクトにセットし、再びそれにアクセスすると、プロキシされたバージョンが戻ってくるので、これらは高度と考えられます。これにより、オブジェクトの同一性に依存する操作を実行するのに、同じオブジェクトの生のバージョンとプロキシされたバージョンの両方を使用するという、 ** 同一性の危険 ** が生じる可能性があります :
171
171
172
172
` ` ` js
173
173
const foo = markRaw({
174
174
nested: {}
175
175
})
176
176
177
177
const bar = reactive({
178
- // although `foo` is marked as raw, foo.nested is not.
178
+ // ` foo ` は raw として印をつけらているが、 foo.nested はそうではない。
179
179
nested: foo.nested
180
180
})
181
181
182
182
console.log(foo.nested === bar.nested) // false
183
183
` ` `
184
184
185
- Identity hazards are in general rare. However, to properly utilize these APIs while safely avoiding identity hazards requires a solid understanding of how the reactivity system works.
185
+ 同一性の危険は一般的にまれです。しかし、同一性の危険を安全に回避しながらこれらの API を適切に利用するには、リアクティブの仕組みをしっかりと理解する必要があります。
186
186
:::
187
187
188
188
## ` shallowReactive `
189
189
190
- Creates a reactive proxy that tracks reactivity of its own properties but does not perform deep reactive conversion of nested objects (exposes raw values).
190
+ 自身のプロパティのリアクティビティを追跡するリアクティブプロキシを作成しますが、ネストされたオブジェクトのディープなリアクティブ変換は行いません(生の値を公開します)。
191
191
192
192
` ` ` js
193
193
const state = shallowReactive({
@@ -197,18 +197,18 @@ const state = shallowReactive({
197
197
}
198
198
})
199
199
200
- // mutating state's own properties is reactive
200
+ // state 自身のプロパティを変更するのはリアクティブ
201
201
state.foo++
202
- // ...but does not convert nested objects
202
+ // ...しかしネストされたオブジェクトは変換されない
203
203
isReactive(state.nested) // false
204
- state .nested .bar ++ // non-reactive
204
+ state.nested.bar++ // リアクティブではない
205
205
` ` `
206
206
207
- Unlike [ ` reactive ` ] ( #reactive ) , any property that uses a [ ` ref ` ] ( /api/refs-api.html#ref ) will ** not ** be automatically unwrapped by the proxy.
207
+ [` reactive ` ](#reactive ) と違って、 [` ref ` ](/ api / refs - api .html #ref ) を使用しているプロパティはプロキシによって自動的にアンラップ ** されません ** 。
208
208
209
209
## ` shallowReadonly `
210
210
211
- Creates a proxy that makes its own properties readonly, but does not perform deep readonly conversion of nested objects (exposes raw values).
211
+ 自身のプロパティを読み取り専用にするプロキシを作成しますが、ネストされたオブジェクトのディープな読み取り専用の変換は行いません(生の値を公開します)。
212
212
213
213
` ` ` js
214
214
const state = shallowReadonly({
@@ -218,11 +218,11 @@ const state = shallowReadonly({
218
218
}
219
219
})
220
220
221
- // mutating state's own properties will fail
221
+ // state 自身のプロパティを変更するのは失敗する
222
222
state.foo++
223
- // ...but works on nested objects
223
+ // ...しかしネストされたオブジェクトでは動作する
224
224
isReadonly(state.nested) // false
225
- state .nested .bar ++ // works
225
+ state.nested.bar++ // 動作する
226
226
` ` `
227
227
228
- Unlike [ ` readonly ` ] ( #readonly ) , any property that uses a [ ` ref ` ] ( /api/refs-api.html#ref ) will ** not ** be automatically unwrapped by the proxy.
228
+ [` readonly ` ](#readonly ) と違って、 [` ref ` ](/ api / refs - api .html #ref ) を使用しているプロパティはプロキシによって自動的にアンラップ ** されません ** 。
0 commit comments