<Suspense> انتظار الاعتماديات غير المتزامنة

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

<Suspense> انتظار الاعتماديات غير المتزامنة

يعرض محتوى بديلًا (fallback) إلى أن تكتمل الاعتماديات غير المتزامنة (مكوّنات async أو setup غير متزامن)، ثم يستبدله بالمحتوى الفعلي.

المجموعةالمدمجات
النوعمكوّن / عنصر
النطاقالقالب
إصدار Vue3.0+
دعم SSRمدعوم

📝 الصيغة

<Suspense>
  <template #default><AsyncChild /></template>
  <template #fallback><p>Loading…</p></template>
</Suspense>

⚙️ الوسائط

props#default (المحتوى غير المتزامن) و#fallback (يُعرض أثناء الانتظار)

▶ مثال

عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:

المخرجات:

Shows 'Loading…' then swaps to 'Async content ready' after ~0.8s.

💡 نقاط مهمة

⚠️ تحذير لا يزال تجريبيًا — قد تتغيّر صياغته بين الإصدارات.
ℹ️ ملاحظة ينتظر أقرب الاعتماديات غير المتزامنة؛ والتداخل (التعشيش) يعالج الأعمق منها.
💡 نصيحة يُستخدم عادةً مع مكوّنات المسارات الكسولة (lazy).
المزيد من الحالات قريباً.

📚 دروس ذات صلة

❓ الأسئلة الشائعة

س ما الفرق بينه وبين علم تحميل (loading flag) يدوي؟
ج يستجيب Suspense لجاهزية المحتوى تلقائيًا دون أعلام يدوية.
س هل يعمل مع SSR؟
ج ينتظر SSR المحتوى غير المتزامن قبل توليد HTML.
س كيف تُعالج الأخطاء؟
ج التقط الأخطاء عبر onErrorCaptured؛ فـ Suspense ليس حدًّا للأخطاء (error boundary).
Web-Tutorial.com

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

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

100%