Computed properties and watchers are features provided in Vue.js for managing and reacting to data changes. They are used to manipulate data and make Vue applications reactive. They are necessary for updating data and responding to changes in data. Even though watchers and computed properties are both similar, they have their own best use cases.

Computed properties

Computed properties are necessary for outputting dynamic values that depend on one or more data properties. It re-executes only when one or some of the dependencies in the computed property change.

const app = Vue.createApp({
data() {
   return {
      counter: 0,
    };
  },
  computed: {
    add() {
      this.counter = this.counter + 1;
    },
    reduce() {
      this.counter = this.counter - 1;
    }
  }
});
app.mount('#app');

The syntax of the computed property is the computed keyword followed by an object, which takes in the function of the data property. Here, the add and reduce function calls the data property using the this keyword and increases or decreases by 1.

However, this is not the best use case for computed properties. They should be used when you want to return a computed value based on the state of other data properties. methods would have been more suitable here instead of computed.

This snippet shows the correct usage.

const app = Vue.createApp({
  data() {
    return {
      name: '',
    };
  },
  computed: {
    fullname() {
      if (this.name === '') {
        return '';
      }
      return this.name + ' ' + 'Doe';
    }
  }
});

app.mount('#app');

In the given code, the name data property is the dependency in the fullname computed property. Vue is aware of this dependency and will reevaluate the fullname computed property for each keystroke the user types in the input field. This process keeps the user interface responsive and synchronized with the data.

Watchers

Just as the name implies, watchers are functions that watch for changes in specific data properties and perform actions in response to those changes. Watchers can be very useful for responding to changes in data and updating the UI accordingly.

A counter-reaction

data() {
    return {
      counter: 0,
    };
  },
  watch: {
    counter(value) {
      if (value > 50) {
        const that = this;
        setTimeout(function () {
          that.counter = 0;
        }, 2000);
      }
    },
  },
  methods: {
    add(num) {
      this.counter = this.counter + num;
    },
    reduce(num) {
      this.counter = this.counter - num;
    },
  }

Here, the watch method monitors changes to the counter property. If the counter value exceeds 50, a timer is set using setTimeout. After a 2-second delay, the counter is reset to 0 using that.counter to access the correct context.

Computed Properties vs. Watchers

Consider some differences between computed properties and watchers.

Computed properties:

• Computed properties can be used with data binding.

• Computed properties get re-evaluated if one of their dependencies changes.

• Computed data can be used with data that depends on other data.

• An example of how computed properties are used in Vue application includes form validations.

Watchers:

• Watchers are not used directly in the HTML templates.

• Watchers are used to run code in reaction to changed data.

• Unlike computed properties, watchers are not used to return values; instead, they respond to changes and perform actions.

• An example of how watchers are used in Vue applications is HTTP requests or timers.

Conclusion

Vue applications use computed properties and watchers to automate data updates and perform actions based on changes, enhancing Vue components' overall functionality and responsiveness. They improve reactivity and the user experience.