Menene bambanci tsakanin ref da 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 haka mahimmanci `ref` da `reactive` sune tushe na Vue 3 Composition API state. Tuntawa cewa `ref` yana buƙata `.value` a cikin script (auto-unwrapped a cikin templates) da cewa `reactive` yana rasa reactivity a kan sake-saitawa/destructuring yana taimakawa ga watannau cututtuka guda biyu na reactivity da aka saba da su a Vue.