reactive() إنشاء وكيل تفاعلي للكائن

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

reactive() إنشاء وكيل تفاعلي للكائن

تغلّف reactive() الكائن أو المصفوفة في وكيل تفاعلي عميق — فقراءة الخصائص وكتابتها مباشرةً تُطلق التحديثات.

المجموعةالتفاعلية: الأساس
النوعAPI
النطاقداخل المكوّن
إصدار Vue3.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 والكائن الأصلي؟
ج كلاهما يشترك في نفس البيانات: تعديل الوكيل يساوي تعديل الكائن الأصلي، لكن الوكيل مزيّن بقدرة التتبع التفاعلي.
Web-Tutorial.com

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

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

100%