Cả hai đều tạo state reactive trong Composition API, nhưng chúng hoạt động khác nhau. ref bọc bất kỳ giá trị nào (kể cả primitive) trong một container reactive; reactive làm cho một object trở nên reactive sâu (deeply reactive) một cách trực tiếp.
<script setup>
import { ref } from "vue";
const count = ref(0); // bọc một primitive
const user = ref({ name: "Ann" });
function inc() {
count.value++; // ⚠️ trong SCRIPT bạn phải dùng .value
user.value.name = "Bob";
}
</script>
<template>
<p>{{ count }}</p> <!-- ✅ trong TEMPLATE, .value được tự động unwrap -->
</template>
Điểm đặc biệt then chốt: trong JavaScript bạn truy cập một ref qua .value; trong template Vue tự động unwrap nó. Quên .value trong script là lỗi phổ biến nhất của người mới.
<script setup>
import { reactive } from "vue";
const state = reactive({ count: 0, user: { name: "Ann" } });
state.count++; // ✅ truy cập trực tiếp, không cần .value
state.user.name = "Bob"; // reactive sâu
</script>
reactive chỉ hoạt động trên object/array (không phải primitive) và bạn dùng trực tiếp các thuộc tính.
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ phá vỡ reactivity (mất reactive proxy)
const { count } = state; // ❌ destructuring làm mất reactivity
Gán lại một object reactive hoặc destructure các thuộc tính của nó sẽ ngắt kết nối chúng khỏi reactivity — một lỗi thường gặp. ref không gặp vấn đề này (bạn gán lại .value).
ref → primitive, và là lựa chọn mặc định được khuyến nghị (dùng được cho mọi thứ, dễ gán lại)
reactive→ khi bạn muốn một object gom nhóm state mà không cần .value (nhưng cẩn thận với destructuring)
Nhiều team chuẩn hóa dùng ref ở khắp nơi để nhất quán.
ref và reactive là nền tảng của state trong Composition API của Vue 3.
Hiểu rằng ref cần .value trong script (tự unwrap trong template) và rằng reactive mất reactivity khi gán lại/destructure sẽ giúp tránh hai lỗi reactivity phổ biến nhất trong Vue.