The Difference between COMPUTED and WATCHERS in Vue.js

Understanding when to use watchers instead of computed and vice versa

Luca Spezzano
NotOnlyCSS

--

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.

--

--

Luca Spezzano
NotOnlyCSS

Frontend developer focused on CSS architecture of scalable and maintainable large scale projects and the development of amazing user interfaces.