Reactivity with ref() and reactive()

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Use ref for primitive state
Use reactive for object state
Understand template auto-unwrapping

Let's break it down simply

ref() wraps a value in a reactive wrapper that you read and write via .value in JavaScript. reactive() turns an object into a proxy. In the template, you can use a ref directly — no .value needed.

vue

<script setup>
import { ref, reactive } from 'vue'

const count = ref(0)
const user = reactive({ name: 'Aye Aye', points: 10 })

function addPoint() {
  count.value++
  user.points += 5
}
</script>

<template>
  <button @click="addPoint">Clicks: {{ count }}</button>
  <p>{{ user.name }} — {{ user.points }} points</p>
</template>

You should see

Clicks: 1
Aye Aye — 15 points

Try it yourself

Store a shopping cart quantity in a ref and change it with two +/− buttons.

Reactivity Fundamentals — Vue.js

Easy traps

Assigning to a ref in script without .value
Replacing a reactive object outright with a new object

Exercise

Store a shopping cart quantity in a ref and change it with two +/− buttons.

You'll know it worked when: Clicks: 1 Aye Aye — 15 points