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.
Work with our skilled Vue developers to accelerate your project and boost its performance.
Hire Vuejs Developers
