Cad é an difríochtaí idir ref agus 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. ## Cén fáth a bhíonn tábhacht ann `ref` agus `reactive` is ea bonn an stáit Composition API Vue 3. Tuigint go bhfuil `.value` de dhíth ar `ref` i script (auto-unwrapped in templates) agus go gcailleann `reactive` a reactivity ar athshocrú/destructuring ábhairt an dá bhug reactivity is coitianta i Vue.