இரண்டும் Composition API இல் வினைத்திறன் கொண்ட நிலை உருவாக்குகின்றன, ஆனால் அவை வேறுவிதமாக செயல்படுகின்றன. ref எந்த மதிப்பையும் (primitive கள் உட்பட) வினைத்திறன் பாத்திரத்தில் மூடுகிறது; 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 அதை தானாகவே அவிழ்க்கிறது. script-ல் .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 கட்டுமான பொருட்களுக்கு/வரிசைகளுக்கு (primitive-க்கு அல்ல) மட்டுமே செயல்படுகிறது மற்றும் நீங்கள் பண்புகளைப் நேரடியாகப் பயன்படுத்துகிறீர்கள்.
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy)
const { count } = state; // ❌ destructuring loses reactivity
ஒரு reactive பொருளை மீண்டும் ஒதுக்குவது அல்லது அதன் பண்புகளை decompose செய்வது அவற்றை வினைத்திறன்பழிலிருந்து துண்டிக்கிறது — அடிக்கடிப் பிறழ். 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 script-ல் .value தேவை (template-ல் தானாகவே அவிழ்க்கப்படுகிறது) மற்றும் reactive மீண்டும் ஒதுக்கல்/decomposition-ல் வினைத்திறனை হারக்கிறது என்பதை புரிந்துகொள்ளுதல் Vue-ல் மிகப் பொதுவான இரண்டு வினைத்திறன் பிழைகளை தடுக்கிறது.