In Vue 2, the data() option in the Options API returns an object with your component’s state, like a simple count value.
export default { data() {
return {
count: 0
}
}
}
Reactive Data in the Vue 3 Composition API
In Vue 3’s Composition API, there’s no data() function. Instead, you define reactive state inside the setup() function using ref() or reactive().
Example: ref()
<script setup>import { ref } from ‘vue’
const count = ref(0)
</script>
<template>
<button @click=”count++”>Clicked {{ count }} times</button>
</template>
Example: reactive()
<script setup>import { reactive } from ‘vue’
const state = reactive({
count: 0,
name: ‘Vue 3’
})
</script>
<template>
<button @click=”state.count++”>
Clicked {{ state.count }} times
</button>
<p>{{ state.name }}</p>
</template>
Also Read: Best Vue Component Libraries to Build Stunning Frontends
Key Takeaway
- In the Vue 3 Composition API, there is no data() function.
- Use ref() for primitive values, and for any value you might fully replace later (primitive or complex).
- Use reactive() for objects or arrays when you mostly update their properties directly.
Related Resources
