watchPausable

类别

Watch

导出体积

463 B

上次更改

5 days ago

别名

pausableWatch

可暂停的 watch

TIP

Pausable Watcher 自 Vue 3.5 起已被添加，使用 const { stop, pause, resume } = watch(watchSource, callback) 代替。

示例

源码 playground (beta)

在下方输入以触发观察

日志

使用方法

像正常使用 watch 一样，但返回额外的 pause() 和 resume() 函数以进行控制。

import { watchPausable
 } from '@vueuse/core'
import { nextTick
, shallowRef
 } from 'vue'

const source
 = shallowRef
('foo')

const { stop
, pause
, resume
 } = watchPausable
(
  source
,
  v
 => console
.log
(`Changed to ${v
}!`),
)

source
.value
 = 'bar'
await nextTick
() // 改变为 bar！

pause
()

source
.value
 = 'foobar'
await nextTick
() // （没有发生变化）

resume
()

source
.value
 = 'hello'
await nextTick
() // 改变为 hello！

类型声明

显示类型声明

export interface WatchPausableReturn extends Pausable {
  stop
: WatchStopHandle

}
export type WatchPausableOptions
<Immediate
> =
  WatchWithFilterOptions
<Immediate
> & PausableFilterOptions

export declare function watchPausable
<
  T
 extends Readonly
<WatchSource
<unknown>[]>,
  Immediate
 extends Readonly
<boolean> = false,
>(
  sources
: [...T
],
  cb
: WatchCallback
<MapSources
<T
>, MapOldSources
<T
, Immediate
>>,
  options
?: WatchPausableOptions
<Immediate
>,
): WatchPausableReturn
export declare function watchPausable
<
  T
,
  Immediate
 extends Readonly
<boolean> = false,
>(
  source
: WatchSource
<T
>,
  cb
: WatchCallback
<T
, Immediate
 extends true ? T
 | undefined : T
>,
  options
?: WatchPausableOptions
<Immediate
>,
): WatchPausableReturn
export declare function watchPausable
<
  T
 extends object,
  Immediate
 extends Readonly
<boolean> = false,
>(
  source
: T
,
  cb
: WatchCallback
<T
, Immediate
 extends true ? T
 | undefined : T
>,
  options
?: WatchPausableOptions
<Immediate
>,
): WatchPausableReturn
/** @deprecated use `watchPausable` instead */
export declare const pausableWatch
: typeof watchPausable