watchIgnorable

类别

Watch

导出体积

410 B

上次更改

5 days ago

别名

ignorableWatch

可忽略的监听器

示例

源码 playground (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
(`更改为 ${v
}！`),
)

source
.value
 = 'bar'
await nextTick
() // 日志: 更改为 bar!

ignoreUpdates
(() => {
  source
.value
 = 'foobar'
})
await nextTick
() // (没有任何变化)

source
.value
 = 'hello'
await nextTick
() // 日志: 更改为 hello!

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

await nextTick
() // 日志: 更改为 logged!

刷新时机

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
(`更改为 ${v
}！`),
)

source
.value
 = 'bar'
await nextTick
() // 日志: 更改为 bar!

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

await nextTick
() // (没有任何变化)

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

await nextTick
() // 日志: 更改为 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