shallowReactive() كائن تفاعلي ضحل

آخر تحديث: 2026-10-22

shallowReactive() كائن تفاعلي ضحل

تجعل shallowReactive() خصائص المستوى الأول فقط تفاعلية، وتُبقي الكائنات المتداخلة كما هي (دون وكلاء).

المجموعةالتفاعلية: المتقدم
النوعAPI
النطاقداخل المكوّن
إصدار Vue3.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؟
ج لتوفير غلاف تفاعلي منخفض الكلفة للبيانات الكبيرة/الخارجية وتجنّب كلفة الوكيل المتكرر.
Web-Tutorial.com

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

100%