Vue watchers vs computed properties

From the past few days, I have been spending most of my time in learning and understanding how Vue and its reactivity works.
Today I would like to share my learnings on when to use watchers and computed properties.
To be noted, I am still at beginner level :)

When to use Computed properties

1. Computed Properties can react to changes in multiple properties, so you can use it when you have a variable in your template, that's built from one or more data properties. A simple example would be creating fullName from the list of firstName and lastName:
   

       computed: {
         fullName() {
           return `${this.firstName} ${this.lastName}`
         }
       }
   

2. Computed Properties are very useful for composing new data from existing sources

3. The output of a computed property is cached, this means that if something independent of the computed property changes and the UI is re-rendered, the cached result will be returned and the property will not be re-calculated, sparing us an expensive operation
   For example, consider two counters, in which computedCounter will be updated from computed button and methodCounter will be updated from method button
   

       data: function() {
         return {
           computedCounter: 0,
           methodCounter: 0
         };
       },
       computed: {
         printMsgComputed: function() { 
            console.log(“printed from computed:”,     
            this.computedCounter);
         } 
       },
       methods: {
         printMsgMethod: function() {
            console.log(“printed from method:”, 
             this.methodCounter);
         }
       },
   

   HTML:
   

      <div>
         <button @click=”computedCounter++”>computed button</button>
         <p>{{ computedCounter }}</p> <br/>
         <button @click=”methodCounter++”>method button</button>   
         <p>{{ methodCounter }}</p> <br/>
   
         {{ printMsgMethod() }}
         {{ printMsgComputed }}
     </div>
   

   When the above code is executed and when you click on computed button both printMsgMethod and printMsgComputed will run.
   But when you click on method button you can see that only printMsgMethod running. You

4. Computed properties creates new reactive properties, so you can use it when you want to reduce a nested property name to a more readable and easy to use one, yet update it when the original property changes

5. You can also use computed properties when you need to listen to changes of more than one data property

When to use Watchers

1. Watchers are useful for cases when you want to perform an action in response to a data property change
2. Also Watchers are most useful when you want to perform asynchronous or expensive operations in response to changing data
3. You can also use watchers when you only need to listen to one specific property

Also Computed properties are only executed when they are needed to be used whereas Watchers are executed whenever a property is changed.

Correct me if I am wrong or missed something.

Comments

[Amin]

Hi Deepika, very complete explanations. I think you totally got the point of computed properties vs watchers!

If I may, you could provide some very simple examples for beginners. Often times, we understand the concept by looking at the examples first, and the explanations next.

What do you think? I can help provide some examples if you need them!

[Maximilian Burszley]

Watchers are meant to react to other properties changing or events. In general, you should default to computed properties for the caching benefits.

vuejs.org/v2/guide/computed.html#C...

[Snowie]

I had a similar issue a few days ago and I came across this:
michaelnthiessen.com/force-re-render/
I have not tried this method yet, but do let me know what you think!