CODEWITHSUNDEEP
javascriptvuejs2vue-component
bognix
bognix

Reputation: 43

What's causing the Vue computed property to be computed?

My understanding of computed properties is that if the computed property is not used in the template it's not supposed to be computed. However, when there is a watcher for a computed property, this computed property is evaluated.

I understand it's not desired application architecture, but my question is if the fact that it's working this way is a desired Vue behaviour or some side-effect of how things are implemented right now and can change in future releases?

Or to put the question in other words: Should the computed property be evaluated if it's not used in the template and it has no other explicit getter in the codebase, except a watcher?

Example:

<template>
  <div>
        <button @click="counter++">+1</button>
        {{ counter }}
  </div>
</template>

<script>
export default {
  name: "Main",
  data() {
    return {
      counter: 0,
    };
  },
  computed: {
    notUsedInTemplate() {
      console.log("notUsedInTemplate computed called");
      return this.counter + 1;
    },
  },
  watch: {
    notUsedInTemplate() {
      console.log("notUsedInTemplate watch called");
    },
  },
};
</script>

Link to sandbox: https://codesandbox.io/s/computed-sandbox-ru3n3?file=/src/components/Main.vue:0-818

Upvotes: 1

Views: 2862

Answers (2)

Abhinav Kumar
Abhinav Kumar

Reputation: 3036

You are right about the computed property. Anything in the computed property will attach to vue instance and accessible in the template.

So, if it not used in template, it should not be in computed.

computed properties are declarative in where as watch is imperative.

computed: {
// a computed getter
reversedMessage: function () {
  // `this` points to the vm instance
  return this.message.split('').reverse().join('')
 }
}

And the best part is that we’ve created this dependency relationship declaratively: the computed getter function has no side effects, which makes it easier to test and understand.

watch are functions that looks for changes and update the value.

watch: {
firstName: function (val) {
  this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
  this.fullName = this.firstName + ' ' + val
 }
}

By using computed getter property you are just making it easy for vue to track the changes and update in a declarative way, however you can do the same wit watch but it is imperative and vue need to look for changes and each changes required that function call to be trigger and later executing that function.

more info

Upvotes: 0

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37773

if the computed property is not used in the template it's not supposed to be computed

...is not correct. Correct statement is:

if the computed property is not used (anywhere) it's not supposed to be evaluated

Using watch evaluates the property. In fact watch is very similar to template re-rendering (In vue 3 re-rendering is in fact little special watchEffect)

Because to watch (anything):

  1. Vue 1st needs to run the code - in this case notUsedInTemplate getter - to find out what reactive data it is accessing (so this.counter is tracked as dependency)
  2. When this.counter changes, watcher runs the notUsedInTemplate getter again so it can compare new value to previous one
  3. If value changed, it runs the callback (which is logging in your example)

So to answer the questions:

  1. yes this is desired behavior as your watcher is not tracking changes of notUsedInTemplate computed property but underlying data it uses to compute it's value
  2. Watcher is accessing the computed property, there is no need to use it anywhere else

OK, more details WHY this works this way

Vue reactivity has always 2 phases:

  1. phase 1 - run the code (be it template or watch expression/fn) and collect all dependencies (e.g. any reactive data the code "touched")
  2. phase 2 - track the dependencies. If any dependency changes, re-run callback (or render function)

See this chapter in the docs - How Changes Are Tracked - the example is explicitly mentioning only template re-rendering (which uses watcher created by Vue itself) but all of this applies to all watchers including those created by the user

Upvotes: 2

Related Questions