跳到主要内容

watchTriggerable

分类
导出大小
570 B
上次更改
10 个月前

可手动触发的侦听器

演示

值: 0

日志 (延迟 500 毫秒)

用法

一个 watch 包装器,支持手动触发 WatchCallback,它返回一个额外的 trigger 来立即执行 WatchCallback

ts
import { 
watchTriggerable
} from '@vueuse/core'
import {
nextTick
,
shallowRef
} from 'vue'
const
source
=
shallowRef
(0)
const {
trigger
,
ignoreUpdates
} =
watchTriggerable
(
source
,
v
=>
console
.
log
(`Changed to ${
v
}!`),
)
source
.
value
= 'bar'
await
nextTick
() // logs: Changed to bar!
// Execution of WatchCallback via `trigger` does not require waiting
trigger
() // logs: Changed to bar!

onCleanup

当你想手动调用一个使用 onCleanup 参数的 watch 时;简单地将 WatchCallback 拿出并调用它并不能轻松实现 onCleanup 参数。

使用 watchTriggerable 将解决这个问题。

ts
import { 
watchTriggerable
} from '@vueuse/core'
import {
shallowRef
} from 'vue'
const
source
=
shallowRef
(0)
const {
trigger
} =
watchTriggerable
(
source
,
async (
v
,
_
,
onCleanup
) => {
let
canceled
= false
onCleanup
(() =>
canceled
= true)
await new
Promise
(
resolve
=>
setTimeout
(
resolve
, 500))
if (
canceled
)
return
console
.
log
(`The value is "${
v
}"\n`)
}, )
source
.
value
= 1 // no log
await
trigger
() // logs (after 500 ms): The value is "1"

类型声明

显示类型声明
ts
export interface 
WatchTriggerableReturn
<
FnReturnT
= void>
extends WatchIgnorableReturn { /** Execute `WatchCallback` immediately */
trigger
: () =>
FnReturnT
} type
OnCleanup
= (
cleanupFn
: () => void) => void
export type
WatchTriggerableCallback
<
V
= any,
OV
= any,
R
= void> = (
value
:
V
,
oldValue
:
OV
,
onCleanup
:
OnCleanup
,
) =>
R
export declare function
watchTriggerable
<
T
extends
Readonly
<
WatchSource
<unknown>[]>,
FnReturnT
,
>(
sources
: [...
T
],
cb
:
WatchTriggerableCallback
<
MapSources
<
T
>,
MapOldSources
<
T
, true>,
FnReturnT
>,
options
?:
WatchWithFilterOptions
<boolean>,
):
WatchTriggerableReturn
<
FnReturnT
>
export declare function
watchTriggerable
<
T
,
FnReturnT
>(
source
:
WatchSource
<
T
>,
cb
:
WatchTriggerableCallback
<
T
,
T
| undefined,
FnReturnT
>,
options
?:
WatchWithFilterOptions
<boolean>,
):
WatchTriggerableReturn
<
FnReturnT
>
export declare function
watchTriggerable
<
T
extends object,
FnReturnT
>(
source
:
T
,
cb
:
WatchTriggerableCallback
<
T
,
T
| undefined,
FnReturnT
>,
options
?:
WatchWithFilterOptions
<boolean>,
):
WatchTriggerableReturn
<
FnReturnT
>

来源

源码演示文档

贡献者

Anthony Fu
Anthony Fu
IlyaL
James Garbutt
Ayaka Rizumu

更新日志

v12.3.0
59f75 - feat(toValue): 废弃 @vueuse/shared 中的 toValue,转而使用 Vue 的原生函数
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)

根据 MIT 许可证发布。