दोन्ही Composition API मध्ये प्रतिक्रियाशील स्थिती तयार करतात, परंतु ते वेगळे काम करतात. ref कोणतेही मूल्य (आदिम मूल्ये समाविष्ट) प्रतिक्रियाशील कंटेनरमध्ये गुंडाळते; reactive ऑब्जेक्ट सरळ गहीरपणे प्रतिक्रियाशील बनवते.
दोन्ही Composition API मध्ये प्रतिक्रियाशील स्थिती तयार करतात, परंतु ते वेगळे काम करतात. ref कोणतेही मूल्य (आदिम मूल्ये समाविष्ट) प्रतिक्रियाशील कंटेनरमध्ये गुंडाळते; 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 फक्त ऑब्जेक्ट्स/arrays वर कार्य करते (आदिम नाहीत) आणि आप गुणधर्म थेट वापरता.
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy)
const { count } = state; // ❌ destructuring loses reactivity
reactive ऑब्जेक्ट पुनः नियुक्त करणे किंवा त्याचे गुणधर्म विघटित करणे प्रतिक्रियाशीलतेपासून विच्छिन्न करते — एक वारंवार त्रुटी. ref ला हा समस्या नाही (आप .value पुनः नियुक्त करता).
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 सर्वत्र मानकीकृत करतात.
ref आणि reactive हे Vue 3 च्या Composition API स्थितीचा आधार आहेत.
हे समजून घेणे की ref ला स्क्रिप्टमध्ये .value आवश्यक आहे (templates मध्ये स्वयंचलितपणे unwrap) आणि reactive पुनः नियुक्ति/विघटनवर प्रतिक्रियाशीलता हरवते, Vue मधील दोन सर्वात सामान्य प्रतिक्रियाशीलता bugs टाळते.