DEV Community

Cover image for The Difference between COMPUTED and WATCHERS in Vue.js
Luca Spezzano
Luca Spezzano

Posted on

2 2

The Difference between COMPUTED and WATCHERS in Vue.js

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.

Watchers

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

Continue to read on Medium to know more 👇🏻

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay