Bacancy Technology

Bacancy Technology represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

World wide offices

12+

Years of Experience

Agile Coaches

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

Vue

October 3, 2024

Vue 3 Composition API data() Function

With the Composition API, you no longer use `data().` Instead, you declare a reactive state using the `ref` and `reactive` functions.

1. Using `ref`: For primitive values (like strings, numbers, etc.), use `ref`:

import { ref } from 'vue';
   export default {
     setup() {
       const message = ref('Hello, Vue!');
       return { message };
     },
   };

You access the value with `message.value`.

2. Using `reactive`: For objects or arrays, use `reactive`:

import { reactive } from 'vue';
   export default {
     setup() {
       const state = reactive({
         message: 'Hello, Vue!',
         count: 0,
       });
       return { state };
     },
   };

You can access the properties directly, like `state.message`.

This approach gives you more flexibility and better organization for complex components.