Skip to content

watchArray

Category
Export Size
303 B
Last Changed
6 months ago

Watch for an array with additions and removals.

Usage

Similar to watch, but provides the added and removed elements to the callback function. Pass { deep: true } if the list is updated in place with push, splice, etc.

ts
import { 
watchArray
} from '@vueuse/core'
const
list
=
ref
([1, 2, 3])
watchArray
(
list
, (
newList
,
oldList
,
added
,
removed
) => {
console
.
log
(
newList
) // [1, 2, 3, 4]
console
.
log
(
oldList
) // [1, 2, 3]
console
.
log
(
added
) // [4]
console
.
log
(
removed
) // []
})
onMounted
(() => {
list
.
value
= [...
list
.
value
, 4]
})

Type Declarations

ts
export declare type 
WatchArrayCallback
<
V
= any,
OV
= any> = (
value
:
V
,
oldValue
:
OV
,
added
:
V
,
removed
:
OV
,
onCleanup
: (
cleanupFn
: () => void) => void,
) => any /** * Watch for an array with additions and removals. * * @see https://vueuse.org/watchArray */ export declare function
watchArray
<
T
,
Immediate
extends
Readonly
<boolean> = false,
>(
source
:
WatchSource
<
T
[]> |
T
[],
cb
:
WatchArrayCallback
<
T
[],
Immediate
extends true ?
T
[] | undefined :
T
[]>,
options
?:
WatchOptions
<
Immediate
>,
):
WatchHandle

Source

SourceDocs

Contributors

Anthony Fu
Anthony Fu
sun0day
Di Weng

Changelog

v12.3.0 on
59f75 - feat(toValue): deprecate toValue from @vueuse/shared in favor of Vue's native
v12.0.0-beta.1 on
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)

Released under the MIT License.

Join the Biggest FREE AI-Driven Development Event for Vue Developers
Save My Seat