Vue ref and reactive Explained — Reactivity System

In this tutorial, you will learn about Vue ref and reactive Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Vue 3 provides ref and reactive as the core reactivity primitives. ref wraps any value (including objects) in a reactive reference, while reactive makes entire objects deeply reactive.

What You'll Learn

• ref for primitives and objects
• reactive for plain objects
• shallowRef and shallowReactive
• toRef and toRefs for destructuring
• isRef and unref helpers

Why It Matters

Understanding ref vs reactive is crucial for correct reactivity. Using the wrong one causes stale data, lost reactivity when destructuring, or unexpected reactive behavior.

<template>
  <div>
    <p>Count (ref): {{ count }}</p>
    <p>Name (reactive): {{ user.name }}</p>
    <p>Email (toRef): {{ email }}</p>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, reactive, toRef, shallowRef } from "vue";

const count = ref(0);
const user = reactive({ name: "Alice", email: "alice@example.com" });
const email = toRef(user, "email");
const items = shallowRef([{ id: 1, name: "Laptop" }, { id: 2, name: "Mouse" }]);

function increment() { count.value++; }
</script>

Expected output: Count increments, user fields are reactive (changes reflected), email stays reactive via toRef, and items list renders correctly.