ref() إنشاء مرجع تفاعلي
آخر تحديث: 2026-10-22
ref() إنشاء مرجع تفاعلي
تغلّف ref() أي قيمة داخل كائن تفاعلي يُقرأ ويُكتب من خلال .value؛ وتُستخدم للاحتفاظ بالأنواع البدائية (نصوص/أرقام/قيم منطقية) وبالقيم التي تريد استبدالها كوحدة واحدة.
| المجموعة | التفاعلية: الأساس |
|---|---|
| النوع | API |
| النطاق | داخل المكوّن |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
import { ref } from "vue"
const count = ref(0)
count.value++ // القراءة والكتابة عبر .value في السكربت
template: {{ count }} // يُفكّ تلقائيًا في القوالب⚙️ الوسائط
| value | القيمة الابتدائية من أي نوع؛ وإذا أُهملت تكون undefined |
|---|
القيمة المُرجعة：كائن تفاعلي (Ref) يحتوي على خاصية .value
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
The page shows 'Clicked 0 times'; each click increments the number.💡 نقاط مهمة
⚠️ تحذير في الشيفرة استخدم دائمًا count.value — فكتابة count++ تعيد ربط المتغير برقم جديد وتُفقده التفاعلية.
💡 نصيحة عند إرجاع ref من setup يُفكّ تلقائيًا في القوالب: اكتب {{ count }} وليس {{ count.value }}.
ℹ️ ملاحظة استخدم ref عندما تحتاج إلى استبدال القيمة كوحدة واحدة، وreactive() للكائنات التي تريد تفاعلية عميقة.
🏷️ الأساس ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س لماذا لا يمكن الاستغناء عن .value؟
ج لا تستطيع JavaScript تتبّع قراءة وكتابة الأنواع البدائية، لذا يُستخدم كائن غلاف مزوّد بـ getter/setter لالتقاط الوصول — وهذه الخاصية الغلافية هي .value.
س هل تفقد الكائنات داخل ref تفاعليتها؟
ج لا؛ فـ ref(obj) تُنشئ داخليًا وكيًا (Proxy) عميقًا للكائن، لذا تظل التعديلات عبر .value.foo تُطلق التحديثات.
س متى أستخدم ref ومتى أستخدم reactive؟
ج القاعدة الافتراضية هي ref (تقبل أي نوع، وقابلة للاستبدال الكامل، وتحافظ على التفاعلية بعد التفكيك)؛ أما reactive فتصلح للكائنات فقط وتفقد التفاعلية عند التفكيك.
