Vad är skillnaden mellan ref och reactive?

Question

Accepted Answer

Båda skapar **reaktiv tillstånd** i Composition API, men de fungerar olika. `ref` omsluter **vilket värde som helst** (inklusive primitiver) i en reaktiv behållare; `reactive` gör ett **objekt** djupt reaktivt direkt. ## ref — för något värde, åtkomst via .value ```vue ``` En viktig särhet: i JavaScript får du åtkomst till en ref genom `.value`; i mallen packar Vue upp det automatiskt. Att glömma `.value` i script är det vanligaste nybörjarmisstaget. ## reactive — för objekt, ingen .value ```vue ``` `reactive` fungerar endast på objekt/arrayer (inte primitiver) och du använder egenskaperna direkt. ## Fällan med reactive: destrukturera eller tilldela inte om ```js let state = reactive({ count: 0 }); state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy) const { count } = state; // ❌ destructuring loses reactivity ``` Om du tilldelar ett `reactive`-objekt på nytt eller destrukturerar dess egenskaper **kopplas de från** reaktiviteten — en vanlig gotcha. `ref` har inte det här problemet (du tilldelar `.value` på nytt). ## Vilken ska man använda ```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) ``` Många team standardiserar på **`ref` överallt** för konsistens. ## Varför det spelar roll `ref` och `reactive` är grunden för Vue 3:s Composition API-tillstånd. Att förstå att `ref` behöver `.value` i script (automatiskt utpakkat i mallar) och att `reactive` förlorar reaktivitet vid omtilldelning/destrukturering förhindrar de två vanligaste reaktivitetsfelen i Vue.