How to Watch Props Change with Vue Composition API in Vue 3

The Composition API in Vue 3 has completely changed how developers organize and arrange code in Vue applications, providing a more flexible and structured method. Monitoring changes in props, which are vital for transferring data between components, is crucial in creating Vue components. Using the Vue 3 watch function in particular, the Composition API gives Vue 3 a simple way to watch props and respond dynamically to changes. We’ll go over how to use Vue 3’s Composition API to observe props in detail in this post, which will help you become more knowledgeable about Vue programming.

Prerequisites

Before we dive in, make sure you have the following:

• Basic understanding of Vue 3 and the Composition API.
• Node.js and npm installed on your machine.
• A Vue 3 project set up. If not, you can create one using Vue CLI:

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
npm run serve

Step-by-Step Guide

1. Set Up Your Component

Let’s start by setting up a simple Vue component that receives a prop:

<template>
  <div>
    <p>Current count: {{ count }}</p>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Counter',
  props: {
    count: {
      type: Number,
      required: true
    }
  }
});
</script>

This component accepts a count prop and displays its value.

2. Watch Prop Changes with a Watch

Next, we’ll use the watch function from the Composition API to react to changes in the count prop.

<template>
  <div>
    <p>Current count: {{ count }}</p>
  </div>
</template>

<script>
import { defineComponent, watch } from 'vue';

export default defineComponent({
  name: 'Counter',
  props: {
    count: {
      type: Number,
      required: true
    }
  },
  setup(props) {
    watch(() => props.count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    return {};
  }
});
</script>

Here, we use the watch function to monitor changes to the count prop. The first argument is a function that returns the prop to watch, and the second argument is a callback that receives the new and old values of the prop.

3. Using toRefs for Reactive Props

For better reactivity, we can use the toRefs function. This allows us to destructure props and maintain reactivity.

<template>
  <div>
    <p>Current count: {{ count }}</p>
  </div>
</template>

<script>
import { defineComponent, watch, toRefs } from 'vue';

export default defineComponent({
  name: 'Counter',
  props: {
    count: {
      type: Number,
      required: true
    }
  },
  setup(props) {
    const { count } = toRefs(props);

    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });
    return { count };
  }
});
</script>

With toRefs, we convert the props object into individual refs, allowing us to watch count directly.

4. Advanced Usage: Watching Multiple Props

If you need to watch multiple props, you can do so by passing an array of functions to the watch function.

<template>
  <div>
    <p>Current count: {{ count }}</p>
    <p>Current status: {{ status }}</p>
  </div>
</template>

<script>
import { defineComponent, watch, toRefs } from 'vue';
export default defineComponent({
  name: 'Counter',
  props: {
    count: {
      type: Number,
      required: true
    },
    status: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const { count, status } = toRefs(props);
    watch([count, status], ([newCount, newStatus], [oldCount, oldStatus]) => {
      console.log(`Count changed from ${oldCount} to ${newCount}`);
      console.log(`Status changed from ${oldStatus} to ${newStatus}`);
    });

    return { count, status };
  }
});
</script>

This example shows how to watch multiple props using an array.

Watching props in Vue 3 using the Composition API is straightforward and powerful. By leveraging watch and toRefs, you can easily monitor and react to prop changes in your components. This approach enhances code reusability and organization, making your Vue applications more maintainable.

Conclusion

The Composition API in Vue 3 provides strong capabilities like Vue watch and toRefs that make it easier to keep track of prop changes inside of components. Through the utilization of these functionalities, developers may guarantee that their Vue applications react instantly to modifications in data, consequently improving both application performance and user experience.

It is imperative for companies wishing to use Vue.js for web projects to hire Vue.js developers who are knowledgeable about the Composition API. Their knowledge guarantees scalability, maintainability, and an effective code structure, resulting in reliable solutions that accomplish corporate goals.