Apa perbedaan antara ref dan 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. ## Mengapa ini penting `ref` dan `reactive` adalah fondasi dari state Composition API Vue 3. Memahami bahwa `ref` memerlukan `.value` dalam script (auto-unwrapped dalam template) dan bahwa `reactive` kehilangan reactivity pada reassignment/destructuring mencegah dua bug reactivity yang paling umum di Vue.