Skip to content

watchPausable

Category
Export Size
463 B
Last Changed
3 weeks ago
Alias
pausableWatch

Pausable watch

INFO

This function will be removed in future version.

TIP

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

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
/** * @deprecated This function will be removed in future version. */ 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

Source

SourceDemoDocs

Contributors

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

Changelog

v14.0.0-alpha.3 on
4a28b - feat: deprecate watchPausable (#5040)
v14.0.0-alpha.2 on
e5f74 - feat!: deprecate alias exports in favor of original function names (#5009)
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.

Write AI-Powered code you can trust
Grab 45% off for AIDD Masterclass before it's gone.
Claim Now
14
hours
:
37
minutes
:
32
seconds
: