1- # Computed and watch
1+ # computed と watch
22
3- > This section uses [ single-file component ] ( ../guide/single-file-component.html ) syntax for code examples
3+ > このセクションでは、コード例に [ シングルファイルコンポーネント ] ( ../guide/single-file-component.html ) 構文を使用します
44
55## ` computed `
66
7- Takes a getter function and returns an immutable reactive [ ref] ( ./refs-api.html#ref ) object for the returned value from the getter.
7+ ゲッタ関数を受け取り、ゲッタからの戻り値に対してイミュータブルでリアクティブな [ ref] ( ./refs-api.html#ref ) オブジェクトを返します。
88
99``` js
1010const count = ref (1 )
1111const plusOne = computed (() => count .value + 1 )
1212
1313console .log (plusOne .value ) // 2
1414
15- plusOne .value ++ // error
15+ plusOne .value ++ // エラー
1616```
1717
18- Alternatively, it can take an object with ` get ` and ` set ` functions to create a writable ref object.
18+ または、 ` get ` と ` set ` 関数のオブジェクトを受け取り、書き込み可能な ref オブジェクトを作成することもできます。
1919
2020``` js
2121const count = ref (1 )
@@ -30,16 +30,16 @@ plusOne.value = 1
3030console .log (count .value ) // 0
3131```
3232
33- ** Typing :**
33+ ** 型 :**
3434
3535``` ts
36- // read-only
36+ // 読み取り専用
3737function computed<T >(
3838 getter : () => T ,
3939 debuggerOptions ? : DebuggerOptions
4040): Readonly <Ref <Readonly <T >>>
4141
42- // writable
42+ // 書き込み可能
4343function computed<T >(
4444 options : {
4545 get: () => T
@@ -63,21 +63,21 @@ interface DebuggerEvent {
6363
6464## ` watchEffect `
6565
66- Runs a function immediately while reactively tracking its dependencies and re-runs it whenever the dependencies are changed.
66+ 依存関係をリアクティブに追跡しながら関数を即時実行し、依存関係が変更されるたびに関数を再実行します。
6767
6868``` js
6969const count = ref (0 )
7070
7171watchEffect (() => console .log (count .value ))
72- // -> logs 0
72+ // -> 0 がログに出力される
7373
7474setTimeout (() => {
7575 count .value ++
76- // -> logs 1
76+ // -> 1 がログに出力される
7777}, 100 )
7878```
7979
80- ** Typing :**
80+ ** 型 :**
8181
8282``` ts
8383function watchEffect(
@@ -86,7 +86,7 @@ function watchEffect(
8686): StopHandle
8787
8888interface WatchEffectOptions {
89- flush? : ' pre' | ' post' | ' sync' // default : 'pre'
89+ flush? : ' pre' | ' post' | ' sync' // デフォルト : 'pre'
9090 onTrack? : (event : DebuggerEvent ) => void
9191 onTrigger? : (event : DebuggerEvent ) => void
9292}
@@ -103,32 +103,32 @@ type InvalidateCbRegistrator = (invalidate: () => void) => void
103103type StopHandle = () => void
104104` ` `
105105
106- **See also **: [ ` watchEffect ` guide ](../guide/reactivity-computed-watchers.html#watcheffect)
106+ **参照 **: [ ` watchEffect ` ガイド ](../guide/reactivity-computed-watchers.html#watcheffect)
107107
108108## ` watchPostEffect ` <Badge text="3.2+" />
109109
110- Alias of ` watchEffect ` with ` flush : ' post' ` option.
110+ ` flush : ' post' ` オプションがついた ` watchEffect ` のエイリアスです。
111111
112112## ` watchSyncEffect ` <Badge text="3.2+" />
113113
114- Alias of ` watchEffect ` with ` flush : ' sync' ` option.
114+ ` flush : ' sync' ` オプションがついた ` watchEffect ` のエイリアスです。
115115
116116## ` watch `
117117
118- The ` watch ` API is the exact equivalent of the Options API [this.\$ watch](./instance-methods.html#watch) (and the corresponding [watch](./options-data.html#watch) option). ` watch ` requires watching a specific data source and applies side effects in a separate callback function. It also is lazy by default - i.e. the callback is only called when the watched source has changed.
118+ ` watch ` API は Options API の [this.\$ watch](./instance-methods.html#watch)(および対応する [watch](./options-data.html#watch) オプション)とまったく同等です。 ` watch ` は特定のデータソースを監視する必要があり、別のコールバック関数で副作用を適用します。また、デフォルトでは遅延処理となります。つまり、監視対象のソースが変更されたときにのみコールバックが呼び出されます。
119119
120- - Compared to [watchEffect](#watcheffect), ` watch ` allows us to :
120+ - [watchEffect](#watcheffect) と比較すると、 ` watch ` では以下のことが可能です :
121121
122- - Perform the side effect lazily ;
123- - Be more specific about what state should trigger the watcher to re-run ;
124- - Access both the previous and current value of the watched state.
122+ - 副作用を遅延して実行する ;
123+ - どの状態がウォッチャの再実行をトリガすべきか、より具体的に指定できる ;
124+ - 監視している状態の、以前の値と現在の値の両方にアクセスできる。
125125
126- ### Watching a Single Source
126+ ### 単一のソースを監視する
127127
128- A watcher data source can either be a getter function that returns a value, or directly a [ref](./refs-api.html#ref):
128+ ウォッチャのデータソースは、値を返すゲッタ関数か、直接 [ref](./refs-api.html#ref) を指定できます :
129129
130130` ` ` js
131- // watching a getter
131+ // ゲッタを監視
132132const state = reactive ({ count: 0 })
133133watch (
134134 () => state .count ,
@@ -137,31 +137,31 @@ watch(
137137 }
138138)
139139
140- // directly watching a ref
140+ // ref を直接監視
141141const count = ref (0 )
142142watch (count , (count , prevCount ) => {
143143 /* ... */
144144})
145145```
146146
147- ### Watching Multiple Sources
147+ ### 複数のソースを監視する
148148
149- A watcher can also watch multiple sources at the same time using an array :
149+ ウォッチャは配列を使って複数のソースを同時に監視することもできます :
150150
151151``` js
152152watch ([fooRef, barRef], ([foo , bar ], [prevFoo , prevBar ]) => {
153153 /* ... */
154154})
155155```
156156
157- ### Shared Behavior with ` watchEffect `
157+ ### ` watchEffect ` との共有動作
158158
159- ` watch ` shares behavior with [ ` watchEffect ` ] ( #watcheffect ) in terms of [ manual stoppage ] ( ../guide/reactivity-computed-watchers.html#stopping-the-watcher ) , [ side effect invalidation ] ( ../guide/reactivity-computed-watchers.html#side-effect-invalidation ) (with ` onInvalidate ` passed to the callback as the 3rd argument instead), [ flush timing ] ( ../guide/reactivity-computed-watchers.html#effect-flush-timing ) and [ debugging ] ( ../guide/reactivity-computed-watchers.html#watcher-debugging ) .
159+ ` watch ` は [ 手動停止 ] ( ../guide/reactivity-computed-watchers.html#監視の停止 ) 、 [ 副作用の無効化 ] ( ../guide/reactivity-computed-watchers.html#副作用の無効化 ) ( ` onInvalidate ` を第 3 引数としてコールバックに渡す)、 [ フラッシュのタイミング ] ( ../guide/reactivity-computed-watchers.html#作用フラッシュのタイミング ) 、 [ デバッグ ] ( ../guide/reactivity-computed-watchers.html#watcher-のデバッグ ) に関して、 [ ` watchEffect ` ] ( #watcheffect ) と動作を共有しています。
160160
161- ** Typing :**
161+ ** 型 :**
162162
163163``` ts
164- // watching single source
164+ // 単一のソースを監視する
165165function watch<T >(
166166 source : WatcherSource <T >,
167167 callback : (
@@ -172,7 +172,7 @@ function watch<T>(
172172 options ? : WatchOptions
173173): StopHandle
174174
175- // watching multiple sources
175+ // 複数のソースを監視する
176176function watch<T extends WatcherSource <unknown >[]>(
177177 sources : T
178178 callback : (
@@ -189,11 +189,11 @@ type MapSources<T> = {
189189 [K in keyof T ]: T [K ] extends WatcherSource <infer V > ? V : never
190190}
191191
192- // see `watchEffect` typing for shared options
192+ // 共有オプションについては `watchEffect` の型を参照
193193interface WatchOptions extends WatchEffectOptions {
194- immediate? : boolean // default : false
194+ immediate? : boolean // デフォルト : false
195195 deep? : boolean
196196}
197197```
198198
199- ** See also ** : [ ` watch ` guide ] ( ../guide/reactivity-computed-watchers.html#watch )
199+ ** 参照 ** : [ ` watch ` ガイド ] ( ../guide/reactivity-computed-watchers.html#watch )
0 commit comments