shallowReactive() كائن تفاعلي ضحل
آخر تحديث: 2026-10-22
shallowReactive() كائن تفاعلي ضحل
تجعل shallowReactive() خصائص المستوى الأول فقط تفاعلية، وتُبقي الكائنات المتداخلة كما هي (دون وكلاء).
| المجموعة | التفاعلية: المتقدم |
|---|---|
| النوع | API |
| النطاق | داخل المكوّن |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
const state = shallowReactive({ count: 0, nested: { a: 1 } })
state.count++ // ✅ يُطلق التحديث
state.nested.a++ // ❌ لا يُطلقه
⚙️ الوسائط
| target | كائن (تُوكَّع خصائصه الذاتية فقط) |
|---|
القيمة المُرجعة:وكيل تفاعلي ضحل
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات:
The top-level button updates the number; the nested one changes data without refreshing the view.
💡 نقاط مهمة
ℹ️ ملاحظة سيناريو الاستخدام مشابه لـ shallowRef: بنيات حالة كبيرة تحتاج تفاعلية المستوى الأول فقط.
⚠️ تحذير عدم تحديث الواجهة لا يعني أن البيانات لم تتغيّر: بيانات المستويات المتداخلة تغيّرت فعلًا لكن دون إطلاق العرض، وهذا فخ شائع.
🏷️ المتقدم ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س هل الفرق مع reactive يقتصر على الأداء؟
ج ليس فقط: السلوك مختلف أيضًا (المتداخل لا يستجيب)، فالفرق دلالي وليس مجرد مفتاح تحسين.
س هل لا يزال يمكن الاستماع إلى الكائنات المتداخلة؟
ج لا يمكن إدراكها إلا باستماع deep صريح للكائن الأصلي أو تغليف عميق بـ ref.
س لماذا وُجد هذا الـ API؟
ج لتوفير غلاف تفاعلي منخفض الكلفة للبيانات الكبيرة/الخارجية وتجنّب كلفة الوكيل المتكرر.