What is the difference between computed property and watcher in Vuejs?

In Vue.js, computed properties and watchers are both reactive approaches for handling data changes, but their purposes and mechanisms differ. Below, I will explain the differences between the two in detail and provide specific scenarios to illustrate.

Computed Properties

Computed properties are cached based on their dependencies. They are recalculated only when the dependencies change. This means that as long as the dependencies remain unchanged, multiple accesses to the computed property immediately return the previously computed result without re-executing the function.

Advantages:

• Better performance (no recalculation when dependencies remain unchanged)
• More concise code with centralized logic

Scenario Example: Suppose we have a shopping cart application where we need to calculate the total price of all items. This total price depends on the quantity and price of each item, so we can implement it using a computed property:

javascript
computed: {
  totalPrice() {
    return this.products.reduce((total, product) => {
      return total + (product.quantity * product.price);
    }, 0);
  }
}

Here, totalPrice is a computed property that automatically updates when the products array's items' quantity or price change.

Watchers

Watchers are used to respond to data changes and execute asynchronous operations or operations with high computational overhead. Watchers do not return values but provide a callback function that is executed when data changes.

Advantages:

• Suitable for executing asynchronous or high-overhead operations in response to data changes
• Can access both old and new values, making them better suited for conditional responses

Scenario Example: If we want to immediately call an API to load new language data after the user changes the language preference setting, we can use a watcher:

javascript
watch: {
  language(newVal, oldVal) {
    this.fetchLanguageData(newVal);
  }
},

methods: {
  fetchLanguageData(lang) {
    // API call to fetch data based on the new language setting
  }
}

In this example, whenever the language property changes, the watcher is triggered and executes the fetchLanguageData method to load the relevant language data.

Summary

Overall, computed properties are suitable for scenarios involving dependent data computation, ensuring efficient and concise code; whereas watchers are better suited for responding to data changes and executing asynchronous or complex logic. Choosing the appropriate reactive approach can make your Vue application more efficient and maintainable.