The difference between COMPUTED and METHODS in Vue.js

Let’s understand the difference and which one to use.

Luca Spezzano
Aug 29, 2019 · 4 min read
Image for post
Image for post

Now it’s some months that I’m using Vue.js and something that made me confused for the first few weeks was the difference between computed and methods.

I have read a lot of resources and I was able to find many answers and explanations but I have never found something that really made it clear in my mind.

So I would like to explain hoping it will remove your doubts :)

They are very similar and could be used to do same things many times but at the same time they are very different and need to be used in different ways.

Now let’s try to explain, with the help of some candies 🍬 😬.

Methods

🍬 Immagine to have a candy dispenser with a display, to know how many candies are inside you need to press a button.

They are often used to run a functionality from the DOM.

i.e. You want to show an output when a user click a button.

Computed properties

🍬 Imagine the same dispenser but this on the display has always the number of candies (updated) and you don’t need to press any button.

They are often used to do calculation and at the end to return a value.

i.e. You are rendering a list of items ordered by date.

Here a simple example that makes the idea:

var vm = new Vue({ 
el: '#vue-app',
data: {
firstname: 'Luca',
lastname: 'Rossi'
},
computed: {
fullname: function() {
return this.firstname + ' ' + this.lastname;
}
}
})

A cool thing of the computed properties is that they are cached, that’s mean that the function will run only once until the values don’t change again also if it’s called many times in the same template.

I created a simple example to help you to understand how is working the caching of the computed properties.

JS: here you set two counters, counterComputed that will be updated from the computed button and the counterMethod that will be updated from the method button. In your computed and in your methods you simply print in the console of some text with the counter.

data: function() {
return {
counterComputed: 0,
counterMethod: 0
};
},
computed: {
printTextComputed: function() {
console.log(“counter printed from computed:”,
this.counterComputed);
}
},
methods: {
printTextMethod: function() {
console.log(“counter printed from method:”, this.counterMethod);
}
},

HTML: here you simply have your buttons that will update the counters, you render the counters near the buttons and you call once the method and once the computed.

<div>
<button @click=”counterComputed++”>computed button</button>
<p>{{ counterComputed }}</p> <br/>
<button @click=”counterMethod++”>method button</button>
<p>{{ counterMethod }}</p> <br/>
{{ printTextMethod() }}
{{ printTextComputed }}
</div>

RESULT: If you followed the code you can see that when you click the computed button both the functions printTextComputed() and printTextMethod() are running but when you click the method button only the function printTextMethod() will runs.

Why ?

  • methods don’t know if the values used in the function changed so they need to run everytime to check.
  • computed properties know if the values used in the function changed so they don’t need to run everytime to check, only once!

Do you prefer a more practical example? Ok let’s use a car this time 🚗 😬!

methods: immagine to have a car and you have to go from a point A to a point B for one week and you set the destination. Every morning the navigator will calculate the route, so for 7 days it will do 7 calculations also if the destination is the same.

computed properties: immagine the same situation and the same navigator, but this time a smarter one, so you set the navigation from the point A to the point B and it will store the route and if you don’t change the destination it won’t calculate anymore, so 1 calculation for 7 days.

So if you have a function that will iterate 10.000 of posts and it must to return the posts with more than 100 likes which one will you use?

Image for post
Image for post

Yes exactly! The performance will be much higher because it will run only once until some value of the posts will change.

In comparison, a method invocation will always run the function whenever a re-render happens.

Remember also that they don’t accept arguments!

When to use METHODS

  • To call a function from the computed or watchers when something happens in your component.
  • You need to pass parameters

When to use COMPUTED PROPERTIES

  • You need to reference a value directly in your template
  • You call the same function more than once in your template

How you can see you can use both in different ways so it depends on your project and your needs. The important thing is to understand how they work and what’s the difference.

I hope you got it now 😀

Vue.js is a Progressive JavaScript Framework, if you want to start with it I suggest you to read the official guide here.

NotOnlyCSS

This publication includes original articles and tips about…

Sign up for NotOnlyCSS

By NotOnlyCSS

Articles and tips for frontend developers Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Luca Spezzano

Written by

Frontend developer focused on CSS architecture of scalable and maintainable large scale projects and the development of amazing user interfaces.

NotOnlyCSS

This publication includes original articles and tips about frontend technologies.

Luca Spezzano

Written by

Frontend developer focused on CSS architecture of scalable and maintainable large scale projects and the development of amazing user interfaces.

NotOnlyCSS

This publication includes original articles and tips about frontend technologies.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store