Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Vue.js Basics Sweeping Vues: Loops, Methods, Directives Computed Properties

Difference between methods and computed in VueJs

Hey guys!! I have another question appear, after watching this Tutorial. I still don't know the difference between these know. It looks like these two pretty much work as the same way.

So hope someone can explain deeply.

Thank you so much!!

1 Answer

sergio alvarez
sergio alvarez
15,205 Points

Hi,

from the docs that would explain the question better than me:

https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

the difference is that computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed. This means as long as message has not changed, multiple access to the reversedMessage computed property will immediately return the previously computed result without having to run the function again.

Why do we need caching? Imagine we have an expensive computed property A, which requires looping through a huge Array and doing a lot of computations. Then we may have other computed properties that in turn depend on A. Without caching, we would be executing A’s getter many more times than necessary! In cases where you do not want caching, use a method instead.

So, the computed method will not run every time the page is reloaded but when a change occurs.