Vue watchers vs computed properties
Tags: vue, reactivity, quarantine, computed
Published: 2020-04-03 10:03:39

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`:
     ```javascript
        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`
     ```javascript
        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:
    ```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.