What is the difference between ref and reactive?

Question

Accepted Answer

Both create **reactive state** in the Composition API, but they work differently. `ref` wraps **any** value (including primitives) in a reactive container; `reactive` makes an **object** deeply reactive directly. ## ref — for any value, accessed via .value ```vue ``` The key quirk: in JavaScript you access a ref through `.value`; in the template Vue unwraps it automatically. Forgetting `.value` in script is the most common beginner bug. ## reactive — for objects, no .value ```vue ``` `reactive` only works on objects/arrays (not primitives) and you use the properties directly. ## The catch with reactive: don't destructure or reassign ```js let state = reactive({ count: 0 }); state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy) const { count } = state; // ❌ destructuring loses reactivity ``` Reassigning a `reactive` object or destructuring its properties **disconnects** them from reactivity — a frequent gotcha. `ref` doesn't have this problem (you reassign `.value`). ## Which to use ```text ref → primitives, and the recommended default (works for everything, easy to reassign) reactive→ when you want a grouped object of state without .value (but mind destructuring) ``` Many teams standardize on **`ref` everywhere** for consistency. ## Why it matters `ref` and `reactive` are the foundation of Vue 3's Composition API state. Understanding that `ref` needs `.value` in script (auto-unwrapped in templates) and that `reactive` loses reactivity on reassignment/destructuring prevents the two most common reactivity bugs in Vue.