ਦੋਵੇਂ Composition API ਵਿੱਚ reactive state ਬਣਾਉਂਦੇ ਹਨ, ਪਰ ਉਹ ਵੱਖਰੇ ਤਰੀਕੇ ਨਾਲ ਕਾਸ਼ ਕਰਦੇ ਹਨ। ref ਕਿਸੇ ਵੀ ਮੁੱਲ (primitives ਸਮੇਤ) ਨੂੰ ਇੱਕ reactive container ਵਿੱਚ ਲਪੇਟਦਾ ਹੈ; reactive ਇੱਕ object ਨੂੰ ਸਿੱਧਾ ਡੂੰਘਾਈ ਨਾਲ reactive ਬਣਾਉਂਦਾ ਹੈ।
ਦੋਵੇਂ Composition API ਵਿੱਚ reactive state ਬਣਾਉਂਦੇ ਹਨ, ਪਰ ਉਹ ਵੱਖਰੇ ਤਰੀਕੇ ਨਾਲ ਕਾਸ਼ ਕਰਦੇ ਹਨ। ref ਕਿਸੇ ਵੀ ਮੁੱਲ (primitives ਸਮੇਤ) ਨੂੰ ਇੱਕ reactive container ਵਿੱਚ ਲਪੇਟਦਾ ਹੈ; reactive ਇੱਕ object ਨੂੰ ਸਿੱਧਾ ਡੂੰਘਾਈ ਨਾਲ 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 ਵਿੱਚ ਤੁਸੀਂ .value ਦੁਆਰਾ ref ਤੱਕ ਪਹੁੰਚਦੇ ਹੋ; template ਵਿੱਚ Vue ਇਸਨੂੰ ਆਟੋਮੈਟਿਕ ਅਨਲਾਂਪ ਕਰਦਾ ਹੈ। script ਵਿੱਚ .value ਭੁੱਲਣਾ ਸਭ ਤੋਂ ਆਮ ਸ਼ੁਰੂਆਤੀ 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 ਸਿਰਫ objects/arrays ਤੇ ਕਾਸ਼ ਕਰਦਾ ਹੈ (primitives ਤੇ ਨਹੀਂ) ਅਤੇ ਤੁਸੀਂ ਗੁਣਾਂ ਨੂੰ ਸਿੱਧਾ ਵਰਤਦੇ ਹੋ।
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy)
const { count } = state; // ❌ destructuring loses reactivity
reactive ਆਬਜੈਕਟ ਨੂੰ reassign ਕਰਨਾ ਜਾ ਇਸਦੀਆਂ ਗੁਣਾਂ ਨੂੰ destructure ਕਰਨਾ reactivity ਤੋਂ ਡਿਸਕਨੈਕਟ ਕਰਦਾ ਹੈ — ਇੱਕ ਆਮ gotcha। 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)
ਬਹੁਤ ਸਾਰੀਆਂ ਟੀਮਾਂ consistency ਲਈ ref ਸਭ ਥਾਵਾਂ ਤੇ standardize ਕਰਦੀਆਂ ਹਨ।
ref ਅਤੇ reactive Vue 3 ਦੀ Composition API state ਦੀ ਬੁਨਿਆਦ ਹਨ।
ਇਹ ਸਮਝ ਕਿ ref ਨੂੰ script ਵਿੱਚ .value ਦੀ ਲੋੜ ਹੈ (templates ਵਿੱਚ auto-unwrapped) ਅਤੇ reactive reassignment/destructuring ਤੇ reactivity ਗੁਆ ਦਿੰਦਾ ਹੈ Vue ਵਿੱਚ ਦੋ ਸਭ ਤੋਂ ਆਮ reactivity bugs ਨੂੰ ਰੋਕਦਾ ਹੈ।
ਵਿਸਤ੍ਰਿਤ ਜਵਾਬਾਂ ਨਾਲ IT ਇੰਟਰਵਿਊ ਸਵਾਲਾਂ ਦੀ ਇੱਕ ਲਾਇਬ੍ਰੇਰੀ — ਜੂਨੀਅਰ ਤੋਂ ਸੀਨੀਅਰ ਤੱਕ।
ਦਾਨ ਕਰੋ