كلاهما ينشئ حالة تفاعلية في Composition API، لكنهما يعملان بشكل مختلف. ref يلف أي قيمة (بما في ذلك البيانات البدائية) في حاوية تفاعلية؛ reactive يجعل object تفاعلياً بعمق بشكل مباشر.
كلاهما ينشئ حالة تفاعلية في Composition API، لكنهما يعملان بشكل مختلف. ref يلف أي قيمة (بما في ذلك البيانات البدائية) في حاوية تفاعلية؛ 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 يفك التفافه تلقائياً. نسيان .value في script هو الخطأ الأكثر شيوعاً بين المبتدئين.
<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 (وليس البيانات البدائية) وتستخدم الخصائص مباشرة.
let state = reactive({ count: 0 });
state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy)
const { count } = state; // ❌ destructuring loses reactivity
إعادة تخصيص reactive object أو استخراج خصائصه يقطع اتصالها بالتفاعلية — مشكلة شائعة. 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 هما أساس حالة Composition API في Vue 3.
فهم أن ref يحتاج .value في script (يتم فك التفافه تلقائياً في القوالب) وأن reactive تفقد التفاعلية عند إعادة التخصيص/الاستخراج يمنع أكثر خطأي التفاعلية شيوعاً في Vue.
مكتبة من أسئلة مقابلات تقنية المعلومات مع إجابات مفصّلة — من المبتدئ إلى المتقدم.
تبرع