reactive() إنشاء وكيل تفاعلي للكائن
آخر تحديث: 2026-10-22
reactive() إنشاء وكيل تفاعلي للكائن
تغلّف reactive() الكائن أو المصفوفة في وكيل تفاعلي عميق — فقراءة الخصائص وكتابتها مباشرةً تُطلق التحديثات.
| المجموعة | التفاعلية: الأساس |
|---|---|
| النوع | API |
| النطاق | داخل المكوّن |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
const state = reactive({ count: 0 })
state.count++ // قراءة وكتابة مباشرة دون .value
⚙️ الوسائط
| target | كائن أو مصفوفة أو مجموعة مثل Map/Set |
|---|
القيمة المُرجعة:وكيل تفاعلي للكائن الأصلي، وكلاهما يشترك في نفس البيانات
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات:
Shows 'Count: 0'; each click increments it.
💡 نقاط مهمة
⚠️ تحذير تعمل مع الكائنات والمصفوفات فقط: تمرير أنواع بدائية (أرقام أو نصوص) يُفقد التفاعلية، وعندها استخدم ref().
⚠️ تحذير التفكيك يُفقد التفاعلية: فـ const { count } = state يُعطي رقمًا عاديًا؛ استخدم toRefs(state) أو تعامل مع state.count مباشرة.
ℹ️ ملاحظة الاستبدال الكامل (state = reactive({})) يقطع ارتباط الوكيل القديم؛ بينما تسمح ref بالاستبدال الكامل وreactive لا.
🏷️ الأساس ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س reactive أم ref — أيهما؟
ج التوصية الافتراضية هي ref: تقبل أي نوع، وقابلة للاستبدال الكامل، وآمنة عند التفكيك؛ واستخدم reactive عندما يكون أسلوب الكائنات (state.xxx) أوضح للقراءة.
س لماذا تتحدّث الصفحة بمجرد تعديل state.xxx؟
ج تستخدم reactive الوكيل Proxy لاعتراض قراءة الخصائص وكتابتها: فتجمع الاعتماديات عند القراءة وتُبلّغ بالتحديث عند الكتابة.
س ما العلاقة بين كائن reactive والكائن الأصلي؟
ج كلاهما يشترك في نفس البيانات: تعديل الوكيل يساوي تعديل الكائن الأصلي، لكن الوكيل مزيّن بقدرة التتبع التفاعلي.