What is the difference between updated hook and watchers in VueJS?

Viewed 15708

I'm discovering VueJS and I don't understand exactly the differences between updated and watchers.

Updated hook

It is a lifecycle hook. According to the official documentation, it is triggered whenever data changes. So whenever a prop or a data is updated (the value, not only the pointer), updated is called.

Watchers

In the documentation, watchers are compared to computed properties. But in which cases would it be best to use updated instead of watchers ?

It seems that in both cases, DOM is not updated when the callback is called (nextTick() is required if we want to manipulate the changes in the DOM). The only difference I see is that watchers are only triggered when one precise property (or data) is updated where updated is always called.

I can't figure out what are the pros of updating whenever a data changes (updating) if we can be more accurate (watchers).

Here are my thoughts.

Thanks :)

2 Answers
Related