DEV Community

loading...

Methods vs Computed in Vue

Ayu Adiati
๐Ÿ‡ฎ๐Ÿ‡ฉ based in ๐Ÿ‡ณ๐Ÿ‡ฑ || Stay home mom ๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘ง || Love ๐Ÿ“ธ & ๐Ÿฃ & โ˜• || Self-taught ๐Ÿ‘ฉโ€๐Ÿ’ป || Full-stack developer in the making โš’
ใƒป1 min read

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 ๐Ÿ˜Š

Discussion (7)

Collapse
drewclem profile image
Drew Clements

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.

Collapse
adiatiayu profile image
Ayu Adiati Author

Thanks, Drew!

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

When would we want to use methods or computed?

Collapse
drewclem profile image
Drew Clements

Exactly!

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

So

data() {
  return {
    number: 1
  }
}
Enter fullscreen mode Exit fullscreen mode

is the same as

computed: {
  number() {
    return 1
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

Thread Thread
adiatiayu profile image
Ayu Adiati Author

Thank you, Drew!!! ๐Ÿ˜ƒ

Collapse
tpoisson805 profile image
Tim Poisson

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.

Collapse
sebrax profile image
Sulivan Braga

Itโ€™s already answered but to mention, you cannot send params on computed.

Collapse
adiatiayu profile image
Ayu Adiati Author

Good to know this!
Thank you, Sulivan ๐Ÿ˜ƒ