What exactly does computed properties in vuejs?

Question

There are couple of questions related computed properties like the following

1. "vuejs form computed property"

2. "Computed properties in VueJs"

3. "computed property in VueJS"

4. "Use computed property in data in Vuejs"

They are asking about specific error or logic. There are lot of websites that are explaining about vuejs related concepts. I read about computed properties on vuejs official website. When we do complex calculations or want to avoid to write more logic in our html template then we use computed properties.

But could not get any solid understanding about computed properties, when it calls, how it calls, what exactly do?

Answer 1

TL;DR: Computed properties are getters/setters in Vue.

---

When defined in the shorthand form, they are getters:

computed: {
  someComputed() {
    return `${this.foo} ${this.bar}`;
  }
}

is equivalent with

computed: {
  someComputed: {
    get: function() {
      return `${this.foo} ${this.bar}`;
    }
  }
}

which can also have a setter:

computed: {
  someComputed: {
    get: function() {
      return `${this.foo} ${this.bar}`;
    }
    set: function(fooBar) {
      const fooBarArr = fooBar.split(' ');
      this.foo = fooBarArr[0];
      this.bar = fooBarArr[1];
    }
  }
}

---

In short, Vue computed properties allow you to bind an instance property to

• a getter: function run when you look up that property; usage:

this.someComputed // returns the computed current value, running the getter.

• a setter: function run when you attempt to assign that property; usage:

this.someComputed = value; // sets the computed current value, running the setter.

Read more on getters and setters in Javascript.

And here's the documentation on Vue computed properties.

Answer 2

You can use computed properties when for example you have some logic what will blow up your template.

The idea is, that normally you want to keep all javascript logic in the javascript side of your vue component, and only access final data in your data (if possible)

For that you can use computed props, which normally are doing simple things like:

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

Or an another good example if you have some currency and you want to format it with thousand separator and euro ign at the end.

Then you can access your computed prop in the template like you access a normal prop, you dont have to call it as a function.

like so:

<div>{{reversedMesage}}</div>

Every time, when any variable what is used in your conputed prop is changing, vue vill take care of it and will re-calculate your computed property again.

Lets say you have the following:

  computed: {
    prettyAmount: function () {
      return this.amount + ' ' + this.currency.toUpperCase()
    }
  }

<div>{{prettyAmount}}</div>

Whenever currency or amount changes, the output of prettyAmount will be changed as well.