Skip to content

watchPausable

Category
Export Size
463 B
Last Changed
6 months ago
Alias
pausableWatch

Pausable watch

TIP

Pausable Watcher has been added to Vue since 3.5, use const { stop, pause, resume } = watch(watchSource, callback) instead on supported versions.

Demo

Type something below to trigger the watch


Log

Usage

Use as normal the watch, but return extra pause() and resume() functions to control.

ts
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
() // Changed to bar!
pause
()
source
.
value
= 'foobar'
await
nextTick
() // (nothing happend)
resume
()
source
.
value
= 'hello'
await
nextTick
() // Changed to hello!

Type Declarations

Show Type Declarations
ts
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 export {
watchPausable
as
pausableWatch
}

Source

SourceDemoDocs

Contributors

Anthony Fu
Anthony Fu
Howard Guo
IlyaL
Robin
sun0day
vaakian X
lvjiaxuan

Changelog

v12.6.0 on
ceb56 - feat: add options.initialState to control the initial active value (#4533)
v12.0.0-beta.1 on
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)

Released under the MIT License.

Build faster with AI
New Masterclass to help you leverage AI in your Vue workflow
Get Early Access