category |
---|
Watch |
Watch that can be triggered manually
A watch
wrapper that supports manual triggering of WatchCallback
, which returns an additional trigger
to execute a WatchCallback
immediately.
import { watchTriggerable } from '@vueuse/core'
import { nextTick, ref } from 'vue'
const source = ref(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!
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.
Using watchTriggerable
will solve this problem.
import { watchTriggerable } from '@vueuse/core'
import { ref } from 'vue'
const source = ref(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"