Vue 3 has introduced a reactivity system that’s more efficient and powerful compared to Vue 2, thanks to the Composition API and the new ref and reactive function.
ref()
In Composition API, the recommended way to declare reactive state is using the ref() function:
import { ref } from ‘vue’
const count = ref(0)
ref() takes the argument and returns it wrapped within a ref object with a .value property:
const count = ref(0)
console.log(count) // { value: 0 }
console.log(count.value) // 0
count.value++
console.log(count.value)
reactive()
In Vue 3, you create reactive objects using the reactive function. This function takes an object as an argument and returns a reactive proxy of that object. Any changes made to properties of the reactive object will trigger re-renders in components that use those properties.
import { reactive } from ‘vue’;
const state = reactive({ count: 0, message: ‘Hello’ });
Usage in template:
<button @click=”state.count++”>
{{ state.count }}
</button>