DEV Community

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

Erik on September 18, 2018

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. Someo...

Read full post

Dino Perovic • Sep 19 '18

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. 🙂

flavio ⚡️🔥 • Sep 21 '18 • Edited

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 :) )

Joe Strouth • Sep 19 '18

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.

Erik • Sep 20 '18

Thanks for the clarifications! ⭐⭐⭐⭐⭐