watchTriggerable
可手动触发的监视
¥Watch that can be triggered manually
示例
用法
¥Usage
支持手动触发 WatchCallback
的 watch
封装器,它返回一个额外的 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"