watchIgnorable

カテゴリ

ウォッチ

エクスポートサイズ

708 バイト

最終更新日

先週

エイリアス

ignorableWatch

無視可能なウォッチ

デモ

ソース

値: 0

ログ

使用方法

特定の更新をソースに無視するための追加の `ignoreUpdates(updater)` と `ignorePrevAsyncUpdates()` を返す拡張 `watch` です。

import { watchIgnorable } from '@vueuse/core'
import { nextTick, ref } from 'vue'

const source = ref('foo')

const { stop, ignoreUpdates } = watchIgnorable(
  source,
  v => console.log(`Changed to ${v}!`),
)

source.value = 'bar'
await nextTick() // logs: Changed to bar!

ignoreUpdates(() => {
  source.value = 'foobar'
})
await nextTick() // (nothing happened)

source.value = 'hello'
await nextTick() // logs: Changed to hello!

ignoreUpdates(() => {
  source.value = 'ignored'
})
source.value = 'logged'

await nextTick() // logs: Changed to logged!

フラッシュタイミング

`watchIgnorable` は `watch` と同じオプションを受け入れ、同じデフォルトを使用します。そのため、デフォルトではコンポーザブルは `flush: 'pre'` を使用して動作します。

`ignorePrevAsyncUpdates`

この機能は、非同期フラッシュ `'pre'` と `'post'` にのみ適用されます。 `flush: 'sync'` が使用されている場合、`ignorePrevAsyncUpdates()` は操作を行いません。ウォッチはソースへの各更新後すぐにトリガーされるためです。コードをより汎用的にするために、同期フラッシュにも提供されています。

import { watchIgnorable } from '@vueuse/core'
import { nextTick, ref } from 'vue'

const source = ref('foo')

const { ignorePrevAsyncUpdates } = watchIgnorable(
  source,
  v => console.log(`Changed to ${v}!`),
)

source.value = 'bar'
await nextTick() // logs: Changed to bar!

source.value = 'good'
source.value = 'by'
ignorePrevAsyncUpdates()

await nextTick() // (nothing happened)

source.value = 'prev'
ignorePrevAsyncUpdates()
source.value = 'after'

await nextTick() // logs: Changed to after!

推奨読書

無視可能なウォッチ - @matias-capeletto 著

型宣言

型宣言を表示

typescript

export type IgnoredUpdater = (updater: () => void) => void
export interface WatchIgnorableReturn {
  ignoreUpdates: IgnoredUpdater
  ignorePrevAsyncUpdates: () => void
  stop: WatchStopHandle
}
export declare function watchIgnorable<
  T extends Readonly<WatchSource<unknown>[]>,
  Immediate extends Readonly<boolean> = false,
>(
  sources: [...T],
  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
  options?: WatchWithFilterOptions<Immediate>,
): WatchIgnorableReturn
export declare function watchIgnorable<
  T,
  Immediate extends Readonly<boolean> = false,
>(
  source: WatchSource<T>,
  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
  options?: WatchWithFilterOptions<Immediate>,
): WatchIgnorableReturn
export declare function watchIgnorable<
  T extends object,
  Immediate extends Readonly<boolean> = false,
>(
  source: T,
  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
  options?: WatchWithFilterOptions<Immediate>,
): WatchIgnorableReturn
export { watchIgnorable as ignorableWatch }