watchIgnorable

無視可能なウォッチ

使用法

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

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

const source = shallowRef('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() // (何も起こらない)

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

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

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

WatchOptionFlush のタイミング

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

ignorePrevAsyncUpdates

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

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

const source = shallowRef('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() // (何も起こらない)

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

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

推奨読書

• Ignorable Watch - by @patak-dev