दुवै Composition API मा reactive state सिर्जना गर्छन्, तर तिनीहरू फरक तरिकाले काम गर्छन्। ref ले कुनै पनि मान (primitives समेत) लाई reactive container मा र्याप गर्छ; reactive ले object लाई सीधै गहिराईसँग reactive बनाउँछ।
दुवै Composition API मा reactive state सिर्जना गर्छन्, तर तिनीहरू फरक तरिकाले काम गर्छन्। ref ले कुनै पनि मान (primitives समेत) लाई reactive container मा र्याप गर्छ; reactive ले object लाई सीधै गहिराईसँग reactive बनाउँछ।
<script setup>
import { ref } from "vue";
const count = ref(0); // wraps a primitive
const user = ref({ name: "Ann" });
function inc() {
count.value++; // ⚠️ in SCRIPT you must use .value
user.value.name = "Bob";
}
</script>
<template>
<p>{{ count }}</p> <!-- ✅ in TEMPLATE, .value is auto-unwrapped -->
</template>
मुख्य विशेषता: JavaScript मा तपाई ref लाई .value मार्फत पहुँच गर्नुहुन्छ; template मा Vue यो स्वचालित रूपमा unwrap गर्छ। स्क्रिप्टमा .value भुल्ना सबैभन्दा साधारण शुरुवातकर्ता त्रुटि हो।
<script setup>
import { reactive } from "vue";
const state = reactive({ count: 0, user: { name: "Ann" } });
state.count++; // ✅ access directly, no .value
state.user.name = "Bob"; // deeply reactive
</script>
reactive केवल objects/arrays मा काम गर्छ (primitives मा होइन) र तपाई properties लाई सीधै प्रयोग गर्नुहुन्छ।
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy)
const { count } = state; // ❌ destructuring loses reactivity
reactive object को reassign वा यसको properties destructure गर्नुहोस् reactivity बाट अलग गर्दछ — एक सामान्य समस्या। ref यो समस्या छैन (तपाई .value को reassign गर्नुहुन्छ)।
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)
धेरै टोलीहरु ref सबैजसो को लागि standardize गर्छन् consistency को लागि।
ref र reactive Vue 3 को Composition API state को आधार हुन्।
यो बुझ्न कि ref लाई script मा .value चाहिन्छ (templates मा auto-unwrapped) र reactive reassignment/destructuring मा reactivity गुमाउँछ Vue मा दुई सबैभन्दा साधारण reactivity bugs लाई रोक्छ।