In the Vue docs it is mentioned that computed properties are smartly cached as opposed to using regular methods:
In comparison, a method invocation will always run the function whenever a re-render happens. Why do we need caching? Imagine we have an expensive computed property...
My question is: Do Vuex watched properties also having caching like computed properties? (including Vuex watching, eg. using vm.$store.watch...
)
Behaviour of watchers
will be same as behaviour of computed
as computed
is internally implemented using watchers
. When one defines a computed
property, Vue internally sets a watcher on the variables used in the computed property, see the code below from source:
function makeComputedGetter (getter: Function, owner: Component): Function {
const watcher = new Watcher(owner, getter, noop, {
lazy: true
})
return function computedGetter () {
if (watcher.dirty) {
watcher.evaluate()
}
if (Dep.target) {
watcher.depend()
}
return watcher.value
}
}
So code written in computed
or watch
blocks will be executed only once, when the reactive data changes.