Do Vue watched properties cache just like the computed properties?

Question

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 watched properties also having caching like computed properties? (including Vuex watching, eg. using vm.$store.watch...)

Saurabh Saurabh · Accepted Answer · 2017-01-14T02:39:13

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 watcher on the variables used in 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.

Do Vue watched properties cache just like the computed properties?

2 Answers