The Difference between COMPUTED and WATCHERS in Vue.js

Understanding when to use watchers instead of computed and vice versa

Luca Spezzano
Nov 26, 2019 · 2 min read
Image for post
Image for post
Photo by Tim Gouw on Unsplash

After writing my first article about The Difference Between Computed and Methods in Vue.js, I noticed that many people were confused about another difference, the one between computed properties and watchers.

I think the reason why this happens is that they can both run when a value changes.

I had the same doubt, so let’s see when to use watchers instead of computed and vice versa.

Computed properties

Computed properties are very handy for manipulating data that already exists. They are cached based; this means 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).
You can think to use them anytime you need to sort through a large group of data, and you don’t want to rerun those calculations every time if you don’t need it.

Let’s look at a basic example.

JS

new Vue({
el: '#app',
data: {
firstName: "Mario",
lastName: "Rossi",
},
computed: {
fullName: function() {
return this.firstName + " " + this.lastName
}
}
})

HTML

<div id="app">
{{fullName}}
</div>

OUTPUT

Mario Rossi

Watchers

Watchers allow you to listen to the data object and run whenever a specific property changes.

Moreover, as we can also read on the official guide

This is most useful when you want to perform asynchronous or expensive operations in response to changing data

Let’s look at a basic example.

JS

new Vue({
el: '#app',
data: {
counter: 0,
},
methods: {
increase: function() {
this.counter ++
},
winner: function() {
alert("you won")
}
},
watch: {
counter: function (val) {
if(val >= 5) { // When this happens run this function
this.winner()
}
}
}
})

HTML

<div id="app">
<button @click="increase()">Increase</button>
{{counter}}
</div>

OUTPUT

The alert with the text "you won" when the counter will be equal or greater than 5

I hope these examples have clarified your doubts.
Lastly, let’s see when to use them to meet our needs better.

When to use Computed or Watchers?

Use watchers when

  • You want to listen when a data property changes
  • You want to watch a data property until it reaches some specific value and then do something

Ps. you can’t watch multiple properties at the same time

Use computed properties when:

  • You want to compose new data from existing data sources
  • You need to sort or manipulate a large group of data
  • You need to use values directly in the template

If you’re curious to know which famous companies already use this JavaScript framework, you can read this article.

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