watchIgnorable

分类

侦听

导出大小

410 B

上次更改

上个月

别名

ignorableWatch

可忽略的 watch

演示

源码在线演练 (beta)

值: 0

日志

用法

扩展的 watch，它返回额外的 ignoreUpdates(updater) 和 ignorePrevAsyncUpdates() 来忽略源的特定更新。

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
() // (nothing happened)

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() 是一个空操作，因为 watch 将在源的每次更新后立即触发。它仍然为同步刷新提供，因此代码可以更通用。

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
() // (nothing happened)

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

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

类型声明

显示类型声明

export type IgnoredUpdater
 = (updater
: () => void) => void
export type IgnoredPrevAsyncUpdates
 = () => void
export interface WatchIgnorableReturn {
  ignoreUpdates
: IgnoredUpdater

  ignorePrevAsyncUpdates
: IgnoredPrevAsyncUpdates

  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
/** @deprecated use `watchIgnorable` instead */
export declare const ignorableWatch
: typeof watchIgnorable