The difference between COMPUTED and METHODS in Vue.js

 

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.

Methods

They are static functions usually used to react to events which happen in the DOM and they accept arguments.
They are incredibly useful for connecting functionality to events, or even just creating small parts of logic to be reused. You can call a method inside another method, they are very versatile!

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

They don’t accept arguments and they are very handy for composing new data from existing sources, they get dynamic values based on other properties.

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 ?

Because it’s like that:

• 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!

When to use METHODS

• To call a function when an event happen in the DOM
• 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 compose new data from existing data sources
• 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.