computed الخصائص المحسوبة (بأسلوب الخيارات)
آخر تحديث: 2026-10-22
computed الخصائص المحسوبة (بأسلوب الخيارات)
يصرّح خيار computed بقيم مشتقة: يُعاد حسابها وتخزينها تلقائياً عند تغيّر التبعيات، وتُستخدم في القالب كخصائص عادية.
| المجموعة | الخيارات: الحالة |
|---|---|
| النوع | خيار |
| النطاق | داخل المكوّن |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
export default {
data() { return { price: 10, qty: 2 } },
computed: {
total() { return this.price * this.qty }
}
}⚙️ الوسائط
| value | كائن: المفاتيح أسماء خصائص محسوبة، والقيم دوال getter (أو كائن get/set) |
|---|
القيمة المُرجعة：تُقرأ مثل اسم خاصية، ومعها تخزين مؤقت (لا إعادة حساب ما دامت التبعيات ثابتة)
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
Shows 'Total: 20' and recalculates on any input change.💡 نقاط مهمة
💡 نصيحة ما أمكن computed فلا تستخدم methods: computed فيها تخزين مؤقت، أما methods فتُنفَّذ عند كل تصيير.
⚠️ تحذير لا تكتب آثاراً جانبية (طلبات، إسناد) داخل الـ getter؛ فذلك مسؤولية watch.
ℹ️ ملاحظة عند الحاجة لخاصية محسوبة قابلة للكتابة استخدم صيغة كائن get/set (مثل تفكيك/دمج الاسم الكامل).
🏷️ الحالة ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ما الفرق عن methods؟
ج تحتفظ computed بتخزين مؤقت مبني على التبعيات؛ أما methods فتعيد التنفيذ عند كل وصول، ولا يمكن ربطها كخاصية.
س لماذا لا تُكتب الأقواس في القالب؟
ج تُقرأ كخاصية (يُنفَّذ الـ getter تلقائياً)، أي this.total وليس this.total().
س هل يجوز الاعتماد على props؟
ج نعم، وهذا أكثر أنماط الاشتقاق شيوعاً: تتحدث computed تلقائياً مع تغيّر الـ prop.
