Both create reactive state in the Composition API, but they work differently. ref wraps any value (including primitives) in a reactive container; reactive makes an object deeply reactive directly.
Both create reactive state in the Composition API, but they work differently. ref wraps any value (including primitives) in a reactive container; reactive makes an object deeply reactive directly.
<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>
The key quirk: in JavaScript you access a ref through .value; in the template Vue unwraps it automatically. Forgetting .value in script is the most common beginner bug.
<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 only works on objects/arrays (not primitives) and you use the properties directly.
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy)
const { count } = state; // ❌ destructuring loses reactivity
Reassigning a reactive object or destructuring its properties disconnects them from reactivity — a frequent gotcha. ref doesn't have this problem (you reassign .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)
Many teams standardize on ref everywhere for consistency.
ref और reactive Vue 3 के Composition API state का आधार हैं।
यह समझना कि ref को script में .value की आवश्यकता है (templates में auto-unwrapped) और reactive पुनः असाइनमेंट/destructuring पर reactivity खो देता है, Vue में दो सबसे आम reactivity bugs को रोकता है।
विस्तृत उत्तरों के साथ IT इंटरव्यू प्रश्नों की एक लाइब्रेरी — जूनियर से सीनियर तक।
दान करें