You are indeed (almost) correct with your assumption.
There is 2 major advantage of this.$watch() though.
- You can start watching dynamically
- the return-value of
this.$watch() is an unwatch function with which you can dynamically stop the watcher during runtime
But that doesn't necessarly mean that you should always use this.$watch() over watch: {}. The opposite. You should always think about what your use case needs
Unwatch-example:
export default {
//..
created(props) {
const unwatchAge = this.$watch(() => this.user.age, (value, oldValue) => {
if (value >= 18) {
alert('You are now allowed to drive a car!');
unwatchAge(); //we don't need age watching for anything else
}
});
}
//...
}
BTW with VUE3 you might wanna look into the watch() / watchEffect() composition API methods.
watch() does the same as watch: {} and this.$watch() and also has an unwatch-method as return-value.
watchEffect() checks any value mentioned inside parameter (function) and puts a watcher on it internally.
watch() Example (composition)
import { toRef, watch} from 'vue';
export default {
//...
setup(props) {
const age = toRef(props.age);
const unwatchAge = watch(age, console.log);
// no () => age or () => age.value needed as age is a reference by using toRef and references can be handles like this
setTimeout(() => {
console.warn('unwatching age!');
unwatchAge();
}, 5000);
}
//...
}
watchEffect() Example (composition)
import { toRef, watchEffect} from 'vue';
export default {
//...
setup(props) {
const age = toRef(props.age);
watchEffect(() => {
if (age.value >= 18) {
alert('You are now allowed to drive a car!');
}
});
//vue will internally recognize that age has to be watched here. No telling it manually.
}
//...
}
