উভয়ই Composition API তে প্রতিক্রিয়াশীল অবস্থা তৈরি করে, কিন্তু তারা ভিন্নভাবে কাজ করে। ref যেকোনো মান (primitives সহ) একটি প্রতিক্রিয়াশীল কন্টেইনারে মোড়ায়; reactive একটি object কে সরাসরি গভীরভাবে প্রতিক্রিয়াশীল করে তোলে।
উভয়ই Composition API তে প্রতিক্রিয়াশীল অবস্থা তৈরি করে, কিন্তু তারা ভিন্নভাবে কাজ করে। ref যেকোনো মান (primitives সহ) একটি প্রতিক্রিয়াশীল কন্টেইনারে মোড়ায়; reactive একটি object কে সরাসরি গভীরভাবে প্রতিক্রিয়াশীল করে তোলে।
<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 এটি স্বয়ংক্রিয়ভাবে unwrap করে। 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 শুধুমাত্র 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 করা প্রতিক্রিয়াশীলতা থেকে সংযোগ বিচ্ছিন্ন করে — একটি সাধারণ সমস্যা। 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 ব্যবহার করে।
ref এবং reactive Vue 3 এর Composition API অবস্থার ভিত্তি।
এটি বোঝা যে ref script এ .value প্রয়োজন (টেমপ্লেটে স্বয়ংক্রিয়ভাবে unwrap করা হয়) এবং reactive reassignment/destructuring এ প্রতিক্রিয়াশীলতা হারায় Vue তে দুটি সবচেয়ে সাধারণ প্রতিক্রিয়াশীলতা বাগ প্রতিরোধ করে।