跳到主要内容

watchIgnorable

分类
导出大小
410 B
上次更改
上个月
别名
ignorableWatch

可忽略的 watch

演示

值: 0

日志

用法

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

ts
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 将在源的每次更新后立即触发。它仍然为同步刷新提供,因此代码可以更通用。

ts
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!

类型声明

显示类型声明
ts
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

来源

源码演示文档

贡献者

Anthony Fu
Arthur Darkstone
Anthony Fu
Vida Xie
Yu Lia
IlyaL
Yue JIN
sun0day
lvjiaxuan
webfansplz

更新日志

e5f74 - feat!: 弃用别名导出,转而使用原始函数名称 (#5009)
v13.4.0
0e10e - fix: 添加并导出类型 (#4809)
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)

根据 MIT 许可证发布。