loading...

What is the difference between Methods, Computed, and Watchers?

blankbash profile image Erik ・1 min read

I'm following Vue's getting started and I'm getting confused, tried CSS Tricks and Stack Overflow and still not understanding it in practice. Someone needs to explain me like i'm five.

What I got so far:

Computed - They are cached based on dependency and only re-evaluate on dependency change.

Methods -

A method invocation will always run the function whenever a re-render happens.

What exactly defines a render or re-render? Every data:value change?

Computed and methods has the same structure, but their location on code are different... 🤔🤔🤔

//vm instance
computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
//...

// in component
methods: {
  reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}
//...

Watch - I got confused about this one, Vue's getting started says it is a callback, alerts that is better to use computed, but don't explain for what it is used for...

I will appreciate any clarification on this topic 👍

Discussion

pic
Editor guide
Collapse
dinoperovic profile image
Dino Perovic

Methods are just static functions that run once called upon. You can pass in arguments, and they can return a value but are not required to.

Computed properties will update automatically once their dependencies change. They don't accept any arguments and must return a single value.

Watch functions allow you to monitor a single property and do stuff once it changes. They don't return any value.

That's the way I see it anyway. 🙂

Collapse
flaviocopes profile image
flavio ⚡️🔥

When to use methods

  • To react on some event happening in the DOM
  • To call a function when something happens in your component. You can call a methods from computed properties or watchers.

When to use computed properties

  • You need to compose new data from existing data sources
  • You have a variable you use in your template that’s built from one or more data properties
  • You want to reduce a complicated, nested property name to a more readable and easy to use one, yet update it when the original property changes
  • You need to reference a value from the template. In this case, creating a computed property is the best thing because it’s cached.
  • You need to listen to changes of more than one data property

When to use watchers

  • You want to listen when a data property changes, and perform some action
  • You want to listen to a prop value change
  • You only need to listen to one specific property (you can’t watch multiple properties at the same time)
  • You want to watch a data property until it reaches some specific value and then do something

(source :) )

Collapse
joestrouth1 profile image
Joe Strouth

Dinos summary is a good one. I would add that methods only run on render (when the component updates) if used in the component template. Other wise they only run when explicitly called (like when bound to an event with v-on:click). Computed is just data that's based on other data; it recalculates whenever the data it's based on changes.

Collapse
blankbash profile image
Erik Author

Thanks for the clarifications! ⭐⭐⭐⭐⭐