Skip to content

watchTriggerable

可手动触发的监视

¥Watch that can be triggered manually

示例

Value: 0

Log (500 ms delay)

用法

¥Usage

支持手动触发 WatchCallbackwatch 封装器,它返回一个额外的 trigger 以立即执行 WatchCallback

¥A watch wrapper that supports manual triggering of WatchCallback, which returns an additional trigger to execute a WatchCallback immediately.

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 参数。

¥When you want to manually call a watch that uses the onCleanup parameter; simply taking the WatchCallback out and calling it doesn't make it easy to implement the onCleanup parameter.

使用 watchTriggerable 将解决这个问题。

¥Using watchTriggerable will solve this problem.

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"