defineAsyncComponent() تعريف مكوّن غير متزامن
آخر تحديث: 2026-10-22
defineAsyncComponent() تعريف مكوّن غير متزامن
تنشئ defineAsyncComponent() مكوّناً يُحمَّل عند الطلب: تُحمَّل الشيفرات عند أول تصيير فقط، وتُستخدم للتحميل الكسول على مستوى المسارات أو للمكوّنات الثقيلة.
| المجموعة | واجهة API العامة |
|---|---|
| النوع | API |
| النطاق | عام |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
const Editor = defineAsyncComponent(() => import("./Editor.vue"))
// مع احتياط التحميل والخطأ
const Panel = defineAsyncComponent({
loader: () => import("./Panel.vue"),
loadingComponent: Spinner,
errorComponent: ErrorBox,
delay: 200
})⚙️ الوسائط
| loader | options | دالة تحميل تُعيد Promise، أو كائن إعداد (loader/loadingComponent/errorComponent/delay/timeout) |
|---|
القيمة المُرجعة：مكوّن غير متزامن (يبدأ التحميل عند أول تصيير)
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
'Lazy component ready' appears after about 0.8s.💡 نقاط مهمة
💡 نصيحة التحميل الكسول على مستوى المسارات هو أكبر مكسب: شاشة العرض الأولى تنزّل شيفرات الصفحة الحالية فقط.
ℹ️ ملاحظة خاصية delay في كائن الإعداد تتجنب وميض شاشة التحميل؛ و timeout يضبط خطأ انتهاء المهلة.
⚠️ تحذير المكوّن غير المتزامن يعيد التحميل عند كل إعادة بناء افتراضياً (ويُعاد استخدام المُخزَّن إن وُجد)؛ اربطه بـ KeepAlive للحفاظ على الحالة.
🏷️ واجهة API العامة ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ما علاقتها بالاستيراد الديناميكي import؟
ج تغلّف import(): تحوّل الـ Promise إلى مكوّن قابل للعرض وتدعم احتياطات التحميل والخطأ.
س متى يُفعَّل التحميل؟
ج عند أول حاجة لعرض المكوّن؛ وبعدها يُعاد استخدام الوحدة المخزنة.
س هل تعمل مع Suspense؟
ج نعم، يمكن لـ Suspense تولي حالة الانتظار، وحينها لا حاجة إلى loadingComponent.
