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.<\/p>\n\n\n\n
Prerequisites<\/strong><\/p>\n\n\n\n Before we dive in, make sure you have the following:<\/p>\n\n\n\n Let’s start by setting up a simple Vue component that receives a prop:<\/p>\n\n\n\n This component accepts a count prop and displays its value.<\/p>\n\n\n\n Next, we’ll use the watch function from the Composition API to react to changes in the count prop.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n For better reactivity, we can use the toRefs function. This allows us to destructure props and maintain reactivity.<\/p>\n\n\n\n With toRefs, we convert the props object into individual refs, allowing us to watch count directly.<\/p>\n\n\n\n If you need to watch multiple props, you can do so by passing an array of functions to the watch function.<\/p>\n\n\n\n This example shows how to watch multiple props using an array.<\/p>\n\n\n\n Watching props in Vue 3 using the Composition API is straightforward and powerful. By leveraging watch and toRefs<\/strong>, 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.<\/p>\n\n\n\n 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. <\/p>\n\n\n\n\n
npm install -g @vue\/cli\nvue create my-vue-app\ncd my-vue-app\nnpm run serve<\/code><\/pre>\n\n\n\nStep-by-Step Guide<\/h2>\n\n\n\n
1. Set Up Your Component<\/h3>\n\n\n\n
<template>\n <div>\n <p>Current count: {{ count }}<\/p>\n <\/div>\n<\/template>\n\n<script>\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n name: 'Counter',\n props: {\n count: {\n type: Number,\n required: true\n }\n }\n});\n<\/script><\/code><\/pre>\n\n\n\n2. Watch Prop Changes with a Watch<\/h3>\n\n\n\n
<template>\n <div>\n <p>Current count: {{ count }}<\/p>\n <\/div>\n<\/template>\n\n<script>\nimport { defineComponent, watch } from 'vue';\n\nexport default defineComponent({\n name: 'Counter',\n props: {\n count: {\n type: Number,\n required: true\n }\n },\n setup(props) {\n watch(() => props.count, (newValue, oldValue) => {\n console.log(`Count changed from ${oldValue} to ${newValue}`);\n });\n\n return {};\n }\n});\n<\/script><\/code><\/pre>\n\n\n\n3. Using toRefs for Reactive Props<\/h3>\n\n\n\n
<template>\n <div>\n <p>Current count: {{ count }}<\/p>\n <\/div>\n<\/template>\n\n<script>\nimport { defineComponent, watch, toRefs } from 'vue';\n\nexport default defineComponent({\n name: 'Counter',\n props: {\n count: {\n type: Number,\n required: true\n }\n },\n setup(props) {\n const { count } = toRefs(props);\n\n watch(count, (newValue, oldValue) => {\n console.log(`Count changed from ${oldValue} to ${newValue}`);\n });\n return { count };\n }\n});\n<\/script><\/code><\/pre>\n\n\n\n4. Advanced Usage: Watching Multiple Props<\/h3>\n\n\n\n
<template>\n <div>\n <p>Current count: {{ count }}<\/p>\n <p>Current status: {{ status }}<\/p>\n <\/div>\n<\/template>\n\n<script>\nimport { defineComponent, watch, toRefs } from 'vue';\nexport default defineComponent({\n name: 'Counter',\n props: {\n count: {\n type: Number,\n required: true\n },\n status: {\n type: String,\n required: true\n }\n },\n setup(props) {\n const { count, status } = toRefs(props);\n watch([count, status], ([newCount, newStatus], [oldCount, oldStatus]) => {\n console.log(`Count changed from ${oldCount} to ${newCount}`);\n console.log(`Status changed from ${oldStatus} to ${newStatus}`);\n });\n\n return { count, status };\n }\n});\n<\/script>\n\n<\/code><\/pre>\n\n\n\nConclusion<\/h2>\n\n\n\n