Vue Watch 👀

What is watch in Vue.js?

In Vue.js, watch is used to monitor changes to a specific reactive property (either a data property or a computed property) and perform actions when its value changes.

Why use the watch property?

You use watch when you need to react to changes in a reactive property that are not covered by the reactivity system's automatic tracking. This is particularly useful for scenarios like asynchronous operations, complex computations, or when you need to perform actions based on changes that aren't directly related to rendering or state updates.

What parameters does the watch function take?

The watch function typically takes two main parameters:

• The property to watch: This can be a string representing the name of the property in your component's data, computed, or props.
• The callback function (handler): This function executes when the watched property changes. It receives two arguments: newValue (the new value of the property) and oldValue (the previous value).

When to use watch in Vue?

You might use watch in Vue when you need to:

• Perform asynchronous operations based on changes to a reactive property.
• Coordinate updates between multiple reactive properties.
• React to changes that affect non-reactive data or external state.

Example of watch in Vue 3 with and without Composition API:

Without Composition API (Options API):

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        count: 0,
      };
    },
    watch: {
      count(newValue, oldValue) {
        console.log(`Count changed from ${oldValue} to ${newValue}`);
        // Perform actions based on the change
      },
    },
    methods: {
      increment() {
        this.count++;
      },
    },
  };
</script>

With Composition API:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
  import { ref, watch } from "vue";

  export default {
    setup() {
      const count = ref(0);

      watch(count, (newValue, oldValue) => {
        console.log(`Count changed from ${oldValue} to ${newValue}`);
        // Perform actions based on the change
      });

      const increment = () => {
        count.value++;
      };

      return {
        count,
        increment,
      };
    },
  };
</script>

Difference between watch in Vue and onChange/useEffect in React:

• Vue watch vs React onChange: watch in Vue is more similar to useEffect in React than onChange. While onChange in React is typically used in form inputs to handle user input changes, useEffect is used for handling side effects after render (similar to Vue's watch).
• Vue watch vs React useEffect: Both watch and useEffect are used for handling side effects after a component has rendered, but they differ in usage patterns due to Vue's reactivity system versus React's functional approach.

In summary, watch in Vue allows you to react to changes in reactive properties, performing actions based on those changes, and it's particularly useful for scenarios involving asynchronous operations or complex state interactions. It's a powerful tool for managing component state and side effects.