Skip to content

Commit 2b5abc8

Browse files
Update WATCH_ARRAY recommendations to use deep: 1
1 parent df8df67 commit 2b5abc8

File tree

1 file changed

+10
-1
lines changed

1 file changed

+10
-1
lines changed

src/breaking-changes/watch.md

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ badges:
99
## Overview
1010

1111
- **BREAKING**: When watching an array, the callback will only trigger when the array is replaced. If you need to trigger on mutation, the `deep` option must be specified.
12+
- In Vue 3.5+, `deep: 1` should be used, which will trigger on array replacement and array mutation.
13+
- Prior to Vue 3.5, `deep: true` can be used, but it will also trigger on deep changes in array elements.
1214

1315
## 3.x Syntax
1416

@@ -20,11 +22,18 @@ watch: {
2022
handler(val, oldVal) {
2123
console.log('book list changed')
2224
},
23-
deep: true
25+
deep: 1 // Vue 3.5+
26+
deep: true // Vue 3.0 - 3.4
2427
},
2528
}
2629
```
2730

31+
:::warning
32+
33+
In versions prior to Vue 3.5, watches don't allow setting the [max traversal depth](https://vuejs.org/guide/essentials/watchers.html#deep-watchers), so you're stuck with `deep: true`, which will also trigger the callback on deep modification of array elements.
34+
35+
:::
36+
2837
## Migration Strategy
2938

3039
If you rely on watching array mutations, add the `deep` option to ensure that your callback is triggered correctly.

0 commit comments

Comments
 (0)