Search code examples
javascriptvuejs2vue.jsvuex

Do Vuex watched properties cache just like Vue's computed properties?


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...)


Solution

  • 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.