Trong Vue 3, sự khác biệt cốt lõi giữa ref và reactive là gì và khi nào nên ưu tiên sử dụng loại nào trong kiến trúc ứng dụng?

Question

Accepted Answer

Phân tích sự khác biệt

ref: Có thể chứa bất kỳ kiểu dữ liệu nào (primitive hoặc object). Khi truy cập trong JavaScript, bạn phải sử dụng thuộc tính .value. Trong template, Vue tự động giải nén (unwrap) nên không cần .value.
reactive: Chỉ chấp nhận object (object, array, map, set). Nó không yêu cầu .value khi truy cập. Tuy nhiên, nó mất tính phản ứng nếu bạn gán lại toàn bộ object hoặc destructure nó.

Khi nào nên sử dụng?

ref: Khuyên dùng cho các giá trị đơn lẻ (string, number, boolean) hoặc khi bạn muốn thay thế hoàn toàn một object.
reactive: Phù hợp cho các state phức tạp có cấu trúc cố định, giúp code gọn gàng hơn vì không cần .value.

Ví dụ
const count = ref(0); // Dùng cho primitive
const user = reactive({ name: 'Vue', age: 25 }); // Dùng cho object
Lưu ý: Trong môi trường Enterprise, việc thống nhất sử dụng ref cho hầu hết các trường hợp thường được ưu tiên để tránh lỗi mất tính phản ứng khi destructure object.