shallowRef() مرجع تفاعلي ضحل
آخر تحديث: 2026-10-22
shallowRef() مرجع تفاعلي ضحل
تتتبع shallowRef() استبدال .value فقط دون وكلاء عميقين للكائنات الداخلية: الاستبدال الكامل يُطلق التحديث، أما تعديل الخصائص الداخلية فلا.
| المجموعة | التفاعلية: المتقدم |
|---|---|
| النوع | API |
| النطاق | داخل المكوّن |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
const big = shallowRef({ list: [] })
big.value = { list: [1] } // ✅ يُطلق التحديث
big.value.list.push(2) // ❌ لا يُطلقه (الداخلي غير مُوكَّع)⚙️ الوسائط
| value | أي قيمة ابتدائية (دون وكلاء عميقين للكائنات الداخلية) |
|---|
القيمة المُرجعة：كائن ref ضحل
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
Pushing inside leaves the number unchanged; replacing the whole value shows 3.💡 نقاط مهمة
💡 نصيحة مناسبة لمجموعات البيانات الضخمة ونسخ المكتبات الخارجية وكائنات الخرائط/الرسوم البيانية: إذ يُهم الاستبدال الكامل فقط دون تفاعلية عميقة.
⚠️ تحذير يمكن بعد التعديل الداخلي إطلاق التحديث يدويًا بـ triggerRef، لكن الاستبدال الكامل يبقى الخيار الأنظف.
ℹ️ ملاحظة يمكن لـ isShallow() التحقق مما إذا كان ref ضحلًا.
🏷️ المتقدم ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س متى تصبح shallowRef ضرورية؟
ج عند تغليف بنية كبيرة للقراءة في معظمها (مثل مصفوفة كبيرة قادمة من واجهة API) مع استبدالها كوحدة واحدة، فيوفّر ذلك كلفة إنشاء الوكيل العميق.
س لماذا لا تتغيّر الصفحة بعد push؟
ج الكائنات الداخلية غير مُوكَّعة فلا يستطيع Vue تتبّع هذا التعديل؛ ولا يتم الإبلاغ بالتحديث إلا باستبدال .value بالكامل.
س هل الفرق في الأداء مع ref(null) كبير؟
ج الفرق واضح مع الكائنات الكبيرة العميقة (يُوفَّر الوكيل المتكرر وجمع الاعتماديات)، ومهمل مع الكائنات الصغيرة.
