Skip to content

API Reference > Computed and watch の翻訳 #541

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 24, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 35 additions & 35 deletions src/api/computed-watch-api.md
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
# Computed and watch
# computed と watch

> This section uses [single-file component](../guide/single-file-component.html) syntax for code examples
> このセクションでは、コード例に [単一ファイルコンポーネント](../guide/single-file-component.html) 構文を使用します

## `computed`

Takes a getter function and returns an immutable reactive [ref](./refs-api.html#ref) object for the returned value from the getter.
ゲッタ関数を受け取り、ゲッタからの戻り値に対してイミュータブルでリアクティブな [ref](./refs-api.html#ref) オブジェクトを返します。

```js
const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // error
plusOne.value++ // エラー
```

Alternatively, it can take an object with `get` and `set` functions to create a writable ref object.
または、`get` `set` 関数のオブジェクトを受け取り、書き込み可能な ref オブジェクトを作成することもできます。

```js
const count = ref(1)
Expand All @@ -30,16 +30,16 @@ plusOne.value = 1
console.log(count.value) // 0
```

**Typing:**
**:**

```ts
// read-only
// 読み取り専用
function computed<T>(
getter: () => T,
debuggerOptions?: DebuggerOptions
): Readonly<Ref<Readonly<T>>>

// writable
// 書き込み可能
function computed<T>(
options: {
get: () => T
Expand All @@ -63,21 +63,21 @@ interface DebuggerEvent {

## `watchEffect`

Runs a function immediately while reactively tracking its dependencies and re-runs it whenever the dependencies are changed.
依存関係をリアクティブに追跡しながら関数を即時実行し、依存関係が変更されるたびに関数を再実行します。

```js
const count = ref(0)

watchEffect(() => console.log(count.value))
// -> logs 0
// -> 0 がログに出力される

setTimeout(() => {
count.value++
// -> logs 1
// -> 1 がログに出力される
}, 100)
```

**Typing:**
**:**

```ts
function watchEffect(
Expand All @@ -86,7 +86,7 @@ function watchEffect(
): StopHandle

interface WatchEffectOptions {
flush?: 'pre' | 'post' | 'sync' // default: 'pre'
flush?: 'pre' | 'post' | 'sync' // デフォルト: 'pre'
onTrack?: (event: DebuggerEvent) => void
onTrigger?: (event: DebuggerEvent) => void
}
Expand All @@ -103,32 +103,32 @@ type InvalidateCbRegistrator = (invalidate: () => void) => void
type StopHandle = () => void
```

**See also**: [`watchEffect` guide](../guide/reactivity-computed-watchers.html#watcheffect)
**参照**: [`watchEffect` ガイド](../guide/reactivity-computed-watchers.html#watcheffect)

## `watchPostEffect` <Badge text="3.2+" />

Alias of `watchEffect` with `flush: 'post'` option.
`flush: 'post'` オプションがついた `watchEffect` のエイリアスです。

## `watchSyncEffect` <Badge text="3.2+" />

Alias of `watchEffect` with `flush: 'sync'` option.
`flush: 'sync'` オプションがついた `watchEffect` のエイリアスです。

## `watch`

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.
`watch` API Options API [this.\$watch](./instance-methods.html#watch)(および対応する [watch](./options-data.html#watch) オプション)とまったく同等です。`watch` は特定のデータソースを監視する必要があり、別のコールバック関数で副作用を適用します。また、デフォルトでは遅延処理となります。つまり、監視対象のソースが変更されたときにのみコールバックが呼び出されます。

- Compared to [watchEffect](#watcheffect), `watch` allows us to:
- [watchEffect](#watcheffect) と比較すると、`watch` では以下のことが可能です:

- Perform the side effect lazily;
- Be more specific about what state should trigger the watcher to re-run;
- Access both the previous and current value of the watched state.
- 副作用を遅延実行できる。
- どの状態がウォッチャの再実行をトリガすべきか、より具体的に指定できる。
- 監視している状態の、以前の値と現在の値の両方にアクセスできる。

### Watching a Single Source
### 単一のソースを監視する

A watcher data source can either be a getter function that returns a value, or directly a [ref](./refs-api.html#ref):
ウォッチャのデータソースは、値を返すゲッタ関数か、直接 [ref](./refs-api.html#ref) を指定できます:

```js
// watching a getter
// ゲッタを監視
const state = reactive({ count: 0 })
watch(
() => state.count,
Expand All @@ -137,31 +137,31 @@ watch(
}
)

// directly watching a ref
// ref を直接監視
const count = ref(0)
watch(count, (count, prevCount) => {
/* ... */
})
```

### Watching Multiple Sources
### 複数のソースを監視する

A watcher can also watch multiple sources at the same time using an array:
ウォッチャは配列を使って複数のソースを同時に監視することもできます:

```js
watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
/* ... */
})
```

### Shared Behavior with `watchEffect`
### `watchEffect` との共有動作

`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).
`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) と動作を共有しています。

**Typing:**
**:**

```ts
// watching single source
// 単一のソースを監視する
function watch<T>(
source: WatcherSource<T>,
callback: (
Expand All @@ -172,7 +172,7 @@ function watch<T>(
options?: WatchOptions
): StopHandle

// watching multiple sources
// 複数のソースを監視する
function watch<T extends WatcherSource<unknown>[]>(
sources: T
callback: (
Expand All @@ -189,11 +189,11 @@ type MapSources<T> = {
[K in keyof T]: T[K] extends WatcherSource<infer V> ? V : never
}

// see `watchEffect` typing for shared options
// 共有オプションについては `watchEffect` の型を参照
interface WatchOptions extends WatchEffectOptions {
immediate?: boolean // default: false
immediate?: boolean // デフォルト: false
deep?: boolean
}
```

**See also**: [`watch` guide](../guide/reactivity-computed-watchers.html#watch)
**参照**: [`watch` ガイド](../guide/reactivity-computed-watchers.html#watch)
2 changes: 1 addition & 1 deletion src/api/reactivity-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@

- [基本のリアクティビティ API](/api/basic-reactivity.html)
- [Refs](/api/refs-api.html)
- [Computed and watch](/api/computed-watch-api.html)
- [computed と watch](/api/computed-watch-api.html)
- [Effect Scope API](/api/effect-scope.html)