Refs and Reactive in Vue.js
From the Vue.js cheat sheet · Refs & Reactive State · verified Jul 2026
Refs and Reactive
Creating reactive state in Vue 3
vue
<!-- Vue 3 Composition API -->
<script setup>
import { ref, reactive, toRefs, toRef } from 'vue'
// ref for primitives
const count = ref(0)
const message = ref('Hello')
// reactive for objects
const state = reactive({
user: { name: 'John' },
items: []
})
// Accessing/modifying
count.value++
state.user.name = 'Jane'
</script>💡 Use ref() for primitives, reactive() for objects in Vue 3
⚡ Refs auto-unwrap in templates, need .value in script
📌 toRefs() lets you destructure reactive objects without losing reactivity
🔥 Template refs give access to DOM elements or component instances
Continue with Vue.js
Save the full cheat sheet or work through every related task.