ref() and reactive()
Create reactive primitives with ref(), wrap objects with reactive(), and understand when to use each and how to access ref values via .value.
Reactivity in Vue 3
Vue 3's Composition API uses reactive primitives to track state. Two key functions: ref() for primitive values, and reactive() for objects. Changes to these automatically update the UI.
ref() for Primitives
ref(value) wraps a value in a reactive container. Access and mutate the value via .value in script. In templates, Vue unwraps refs automatically — no .value needed.
<script setup>
import { ref } from 'vue';
const count = ref(0);
const name = ref('Alice');
function increment() {
count.value++; // .value in script
}
</script>
<template>
<p>{{ count }}</p> <!-- no .value in template -->
<button @click="increment">+</button>
</template>