<Suspense> هو مكون مدمج ينسق التبعيات غير المتزامنة في شجرة المكونات الخاصة به — فهو يعرض بديل (واجهة تحميل) حتى تحل جميع العمليات غير المتزامنة المتداخلة، ثم يعرض المحتوى الفعلي. يزيل النموذج المكرر isLoading.
<template>
<Suspense>
<template #default>
<UserDashboard /> <!-- a component with async setup -->
</template>
<template #fallback>
<LoadingSpinner /> <!-- shown while #default is resolving -->
</template>
</Suspense>
</template>
<!-- UserDashboard.vue -->
<script setup>
// top-level await makes this an "async component" that Suspense waits for
const user = await fetchUser(); // no isLoading state needed here
const posts = await fetchPosts();
</script>
<template>
<h1>{{ user.name }}</h1>
<PostList :posts="posts" />
</template>
عادة لا يمكن للمكون أن يقوم بـ await في setup بدون إدارة حالة التحميل. يسمح <Suspense> للمكون الفرعي باستخدام top-level await (أو async setup)، والمكون الأب Suspense يتولى حالة التحميل بدلاً منه — كود المكون الفرعي يبقى نظيفاً، فقط في انتظار بياناته.
<Suspense> waits for every async setup in its subtree to resolve,
then swaps the fallback for the real content in one go
(avoids a cascade of separate spinners).
<script setup>
import { onErrorCaptured } from "vue";
onErrorCaptured((err) => { /* handle async setup failures */ return false; });
</script>
زاوج Suspense مع حد خطأ (onErrorCaptured) للتعامل مع إعدادات غير متزامنة فاشلة، حيث أن Suspense نفسه يدير فقط الانتقال من التحميل إلى التحميل المكتمل.
<Suspense> has been an EXPERIMENTAL feature — its API may change.
It's also what Nuxt uses internally to coordinate async page data.
<Suspense> ينسق بشكل تصريحي حالات التحميل غير المتزامنة — مما يسمح للمكونات بـ await بياناتها مباشرة بينما يعرض سلف واحد بديل واحد حتى يكون كل شيء جاهزاً.
يزيل الأعلام isLoading المبعثرة والعديد من أيقونات التحميل، ويدعم جلب البيانات في أطر عمل مثل Nuxt.
معرفة أنه موجود (وأنه لا يزال تجريبياً، من الأفضل إقرانه مع حد خطأ) مفيدة لواجهة مستخدم غير متزامنة نظيفة، خاصة في تطبيقات SSR/غنية بالبيانات.