Methods vs Computed in Vue

#help #discuss #vue #codenewbie

Hello 👋🏼,

Lately I've been learning Vue.
So today I learned about computed property.

In my understanding (please correct me if I'm wrong), computed is the same as methods property, only it will be re-executed if data that are used within the property are changed.
While methods property will be re-executed for any data changes within the page.

In which condition is the best practice to use methods or computed?

Thank you in advance for any help 😊

Top comments (8)

Drew Clements • Jun 25 '21

Another way to look at computed is that they can be used as dynamic data for every render.

Methods are functions that can be called as normal JS functions, but computed properties will be “re-calculated” anytime some data changes in the component.

Ayu Adiati • Jun 25 '21

Thanks, Drew!

So computed is more like a method to update data to be dynamic?

When would we want to use methods or computed?

Drew Clements • Jun 25 '21

Exactly!

Another important thing to note is that computed properties are available the same as properties in your data store

data() {
  return {
    number: 1
  }
}

is the same as

computed: {
  number() {
    return 1
  }
}

Both would be available with using this.number or {{ number }}

But, if you ever needed number to update based on something else in the component, then the computed would do it auto-magically.

Ayu Adiati • Jun 25 '21

Thank you, Drew!!! 😃

Tim Poisson • Jul 5 '21

Also should mention that Computed Properties are automatically cached while Methods are not.

If you are running an 'expensive' operation, it is best to cache this data as a Computed Property or else the function will re-run everytime the page refreshes which creates unnecessary overhead.

For larger applications Computed Properties are typically used in conjunction with Vuex to help access global application data as well.