watchTriggerable

分类

侦听

导出大小

570 B

上次更改

10 个月前

可手动触发的侦听器

演示

源码演练场 (beta)

值: 0

日志 (延迟 500 毫秒)

用法

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

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 将解决这个问题。

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"

类型声明

显示类型声明

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
>