Documentation of Vue.js says:

Using the watch option allows us to perform an asynchronous operation (accessing an API), limit how often we perform that operation, and set intermediary states until we get a final answer. None of that would be possible with a puted property.

While on the same page, we can see that puted property uses a function the same as watcher.

Reference: .html#Computed-vs-Watched-Property

So my question is what is the technical reason supporting the above statement or limiting us from using puted properties instead of watchers?

Documentation of Vue.js says:

Using the watch option allows us to perform an asynchronous operation (accessing an API), limit how often we perform that operation, and set intermediary states until we get a final answer. None of that would be possible with a puted property.

While on the same page, we can see that puted property uses a function the same as watcher.

Reference: https://v2.vuejs/v2/guide/puted.html#Computed-vs-Watched-Property

So my question is what is the technical reason supporting the above statement or limiting us from using puted properties instead of watchers?

• javascript
• vue.js
• vuejs2

Share Improve this question Follow edited Jul 14, 2022 at 2:29 tony19 139k2323 gold badges278278 silver badges348348 bronze badges asked Aug 30, 2020 at 14:07 Shahbaz A.Shahbaz A. 4,35644 gold badges3838 silver badges5959 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8 +50

It's important to understand how puted properties work in Vue. In most cases what developer gives to Vue is a getter which is a function, which defines how the value of puted property is puted.

1. When the puted prop getter (function provided by you) is running, Vue is monitoring which other reactive data is accessed so it knows on what data the result depends
2. Result of the getter is cached by Vue
3. Whenever you access the value of the puted prop, small chunk of Vue code is executed - it first checks whether it has value in the cache and if yes, whether some of the inputs changed from the last time the getter was executed. If there is a value and no changes, the getter is not executed at all and cached value is returned instead

Title of your question mentions "asynchronous or expensive" ...

Expensive

Expensive putation is exactly what puted props are for because the getter is executed only when needed. But it is executed every time something changes, which is not always what you want. So the docs are talking about use cases when you have some stream of values - let's say user typing - and you want perform the operation only after she stops for 200ms. Or you have some stream of data (telemetry) but want to update the graph only every 2 seconds

This is not possible with puted because Vue expects getter to return value every time and that value is stored in the cache for future use.

Asynchronous

As I said before, Vue expects the puted getter to return a value. When you run some async call inside puted prop getter, you have no value to return (in case of asynchrony based on callbacks - but JS functions always return something) or you have a promise of the future value. So Vue takes the result of your function (undefined or promise) and store it in the cache ...which is something you don't want. So if there is any asynchrony involved, watch is always better...

The puted property watches (observes) changes in other properties and does calculations based on these properties to return a value, in other hand Watcher property observes changes in one property and runs some logic based on that property and doesn't return any value.

So if your use case needs to return a value after doing some calculations use puted, else if you need to run some operations after a property changes you should use watch.

Watcher property could observes the puted property changes because puted one returns a value, but you cannot use a puted property based on watcher one.