Skip to content

Commit 7ec6c80

Browse files
committed
Adding documentation for watch and proxied objects
1 parent 713650e commit 7ec6c80

File tree

1 file changed

+18
-0
lines changed

1 file changed

+18
-0
lines changed

src/guide/reactivity-computed-watchers.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,24 @@ firstName.value = "John"; // logs: ["John",""] ["", ""]
211211
lastName.value = "Smith"; // logs: ["John", "Smith"] ["John", ""]
212212
```
213213

214+
### Watching Reactive Objects
215+
216+
Using a watcher to compare values of an Array or Object that are reactive requires that it has a copy made of just the values.
217+
218+
```js
219+
const numbers = reactive([1,2,3,4])
220+
221+
watch(
222+
() => [...numbers],
223+
(numbers, prevNumbers) =>{
224+
console.log(numbers, prevNumbers);
225+
})
226+
227+
numbers.push(5) // logs: [1,2,3,4,5] [1,2,3,4]
228+
```
229+
230+
For deeply nested object and arrays, a deep copy of values may be required. This can be achieved with a utility such as `lodash.cloneDeep`
231+
214232
### Shared Behavior with `watchEffect`
215233

216234
`watch` shares behavior with [`watchEffect`](#watcheffect) in terms of [manual stoppage](#stopping-the-watcher), [side effect invalidation](#side-effect-invalidation) (with `onInvalidate` passed to the callback as the 3rd argument instead), [flush timing](#effect-flush-timing) and [debugging](#watcher-debugging).

0 commit comments

Comments
 (0)