రెండూ Composition API లో ప్రతిచర్య స్థితిని సృష్టిస్తాయి, అయితే అవి భిన్నంగా పని చేస్తాయి. ref ఏ విలువను (primitives సహా) ప్రతిచర్య కంటైనర్లో చుట్టుకుంటుంది; reactive ఒక వస్తువును సరిగ్గా లోతైన ప్రతిచర్య చేస్తుంది.
రెండూ Composition API లో ప్రతిచర్య స్థితిని సృష్టిస్తాయి, అయితే అవి భిన్నంగా పని చేస్తాయి. ref ఏ విలువను (primitives సహా) ప్రతిచర్య కంటైనర్లో చుట్టుకుంటుంది; 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 ద్వారా యాక్సెస్ చేస్తారు; టెంప్లేట్లో Vue ఆటోమేటిక్గా దీన్ని విప్పుకుంటుంది. స్క్రిప్ట్లో .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 వస్తువులు/శ్రేణులపై మాత్రమే పని చేస్తుంది (primitives కాదు) మరియు మీరు లక్షణాలను నేరుగా ఉపయోగిస్తారు.
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 అవసరమని (టెంప్లేట్లలో ఆటోమేటిక్గా అన్రాప్గా ఉంటుంది) మరియు reactive పునర్నిర్ణయం/విభజన చేసేటప్పుడు ప్రతిచర్య కోల్పోతుందని అర్థం చేసుకోవడం Vue లో రెండు సాధారణ ప్రతిచర్య బగ్లను నిరోధిస్తుంది.