Skip to content

Commit dddb6f2

Browse files
committed
update $watch docs
1 parent 6ed1da8 commit dddb6f2

File tree

1 file changed

+24
-9
lines changed

1 file changed

+24
-9
lines changed

source/api/instance-methods.md

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,33 +7,48 @@ order: 4
77

88
> You can observe data changes on a Vue instance. Note that all watch callbacks fire asynchronously. In addition, value changes are batched within an event loop. This means when a value changes multiple times within a single event loop, the callback will be fired only once with the latest value.
99
10-
### vm.$watch( expression, callback, [deep, immediate] )
10+
### vm.$watch( expOrFn, callback, [options] )
1111

12-
- **expression** `String`
12+
- **expOrFn** `String|Function`
1313
- **callback( newValue, oldValue )** `Function`
14-
- **deep** `Boolean` *optional*
15-
- **immediate** `Boolean` *optional*
14+
- **options** `Object` *optional*
15+
- **deep** `Boolean`
16+
- **immediate** `Boolean`
17+
- **sync** `Boolean`
1618

17-
Watch an expression on the Vue instance for changes. The expression can be a single keypath or actual expressions:
19+
Watch an expression or a computed function on the Vue instance for changes. The expression can be a single keypath or actual expressions:
1820

1921
``` js
2022
vm.$watch('a + b', function (newVal, oldVal) {
2123
// do something
2224
})
25+
// or
26+
vm.$watch(
27+
function () {
28+
return this.a + this.b
29+
},
30+
function (newVal, oldVal) {
31+
// do something
32+
}
33+
)
2334
```
2435

25-
To also detect nested value changes inside Objects, you need to pass in `true` for the third `deep` argument. Note that you don't need to do so to listen for Array mutations.
36+
To also detect nested value changes inside Objects, you need to pass in `deep: true` in the options argument. Note that you don't need to do so to listen for Array mutations.
2637

2738
``` js
28-
vm.$watch('someObject', callback, true)
39+
vm.$watch('someObject', callback, {
40+
deep: true
41+
})
2942
vm.someObject.nestedValue = 123
3043
// callback is fired
3144
```
3245

33-
Passing in `true` for the fourth `immediate` argument will trigger the callback immediately with the current value of the expression:
46+
Passing in `immediate: true` in the option will trigger the callback immediately with the current value of the expression:
3447

3548
``` js
36-
vm.$watch('a', callback, false, true)
49+
vm.$watch('a', callback, {
50+
immediate: true
51+
})
3752
// callback is fired immediately with current value of `a`
3853
```
3954

0 commit comments

Comments
 (0)