Reactivity — ref() & reactive()

ref() wraps a value into a reactive container; reactive() wraps an object. Either updates the DOM when changed.

5 min read Level 2/5 #vue#reactivity#refs

What you'll learn

Create a ref and access .value in script
Use reactive for nested objects
Know when to pick each

Reactivity is Vue’s headline feature: change a piece of state and the DOM re-renders automatically. Vue gives you two primitives — ref() for any value, reactive() for objects.

ref() — Works for Anything

ref() wraps a value in a reactive container. Access the underlying value through .value in script; in templates Vue auto-unwraps it.

import { ref } from 'vue'

const count = ref(0)
count.value++           // in script — use .value
console.log(count.value) // 1

<template>
  <!-- no .value needed in template -->
  <p>{{ count }}</p>
</template>

reactive() — For Objects Only

reactive() proxies an object so property reads and writes are tracked. No .value here — you use the object directly.

import { reactive } from 'vue'

const user = reactive({ name: 'Ada', age: 36 })
user.name = 'Bob'   // triggers updates

It does not work on primitives (reactive(0) fails) and you lose reactivity if you destructure (const { name } = user).

Which One?

A simple heuristic: default to ref.

ref works for primitives, objects, arrays — everything.
ref survives reassignment: state.value = newObject still triggers updates.
reactive breaks on destructure and reassignment.

// Idiomatic modern Vue
const user = ref({ name: 'Ada', age: 36 })
user.value.name = 'Bob'   // works
user.value = { name: 'Carol', age: 24 } // also works

Computed Properties →