watchTriggerable

类别

Watch

导出大小

570 B

最近修改

2 days ago

可手动触发的监视

🌐 Watch that can be triggered manually

示例

源代码在线运行

Value: 0

Log (500 ms delay)

用法

🌐 Usage

一个 watch 封装器，支持手动触发 WatchCallback，并返回一个额外的 trigger 用于立即执行 WatchCallback。

🌐 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, 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.

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"