data بيانات حالة المكوّن
آخر تحديث: 2026-10-22
data بيانات حالة المكوّن
يصرّح خيار data بحالة المكوّن التفاعلية: يجب كتابته كدالة تُعيد كائناً، لضمان امتلاك كل نسخة بياناتها المستقلة.
| المجموعة | الخيارات: الحالة |
|---|---|
| النوع | خيار |
| النطاق | داخل المكوّن |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
export default {
data() {
return { count: 0, user: { name: "Ana" } }
}
}⚙️ الوسائط
| value | بلا وسائط: هي دالة تُعيد البيانات الأولية (أو كائن، ويُقصر ذلك على النسخة الجذرية) |
|---|
القيمة المُرجعة：الحقول داخل الكائن تصبح بيانات تفاعلية تلقائياً، وتُصل بالاسم مباشرة في القالب
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
Shows 'Count: 0'; clicking increments it.💡 نقاط مهمة
⚠️ تحذير يجب استخدام دالة: كتابة الكائن مباشرة تجعل النسخ المتعددة تتشارك البيانات نفسها، فيحدث خطأ تسرّب البيانات.
ℹ️ ملاحظة جميع الحقول في الكائن المُعاد تُعالج بتفاعلية عميقة (حتى الكائنات/المصفوفات المتداخلة تستجيب).
💡 نصيحة الحقول التي تبدأ بـ _ أو $ لا تُعلَّق على النسخة (محجوزة للاستخدام الداخلي).
🏷️ الحالة ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س لماذا يجب أن تكون data دالة؟
ج المكوّن يُعاد استخدامه مرات عدة، والدالة تضمن كائناً جديداً تماماً عند كل استدعاء، فتنعزل البيانات بين النسخ.
س هل يمكن استخدام props داخل data؟
ج لا يمكن الاعتماد عليها مباشرة: للاشتقاق من props اكتب computed (فلن تتحدث data تلقائياً عند تغيّر الـ prop).
س هل يلزم this في القالب؟
ج لا حاجة: اكتب اسم الحقل مباشرة في القالب، أما this.count ففي منطق السكربت فقط.
