1---
2category: Watch
3---
4 
5# watchArray
6 
7Watch for an array with additions and removals.
8 
9## Usage
10 
11Similar 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.
12 
13```ts
14import { watchArray } from '@vueuse/core'
15 
16const list = ref([1, 2, 3])
17 
18watchArray(list, (newList, oldList, added, removed) => {
19  console.log(newList) // [1, 2, 3, 4]
20  console.log(oldList) // [1, 2, 3]
21  console.log(added) // [4]
22  console.log(removed) // []
23})
24 
25onMounted(() => {
26  list.value = [...list.value, 4]
27})
28```
29 
30## Type Declarations
31 
32```ts
33export declare type WatchArrayCallback<V = any, OV = any> = (
34  value: V,
35  oldValue: OV,
36  added: V,
37  removed: OV,
38  onCleanup: (cleanupFn: () => void) => void,
39) => any
40/**
41 * Watch for an array with additions and removals.
42 *
43 * @see https://vueuse.org/watchArray
44 */
45export declare function watchArray<
46  T,
47  Immediate extends Readonly<boolean> = false,
48>(
49  source: WatchSource<T[]> | T[],
50  cb: WatchArrayCallback<T[], Immediate extends true ? T[] | undefined : T[]>,
51  options?: WatchOptions<Immediate>,
52): WatchHandle
53```
54