Frontend Academy · درس

المكوّنات غير المتزامنة وSuspense

حمّل المكوّنات بشكل كسول باستخدام defineAsyncComponent، وغلّفها داخل ، واعرض محتوى بديلًا أثناء تحميل حزمة المكوّن

المكوّنات غير المتزامنة وSuspense درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

لماذا المكونات غير المتزامنة؟

يساعد تحميل المكونات الكبيرة أو نادرة الاستخدام عند الطلب، مثل لوحة الإدارة أو مكتبة الرسوم البيانية، في إبقاء الحزمة الأولية صغيرة. تتولى defineAsyncComponent دورة حياة الاستيراد الديناميكي.

defineAsyncComponent

مرّر دالة تحميل تعيد وعدًا يُحل إلى مكوّن. يتولى Vue معالجة التحميل والأخطاء والمهلات الزمنية.

import { defineAsyncComponent } from 'vue';

const Dashboard = defineAsyncComponent(
  () => import('./Dashboard.vue')
);

// Use it like a normal component:
<template>
  <Dashboard />
</template>

تهيئة السلوك غير المتزامن

مرّر كائن خيارات لتخصيص واجهة التحميل، وواجهة الخطأ، والتأخير قبل التحميل، والمهلة الزمنية.

const Dashboard = defineAsyncComponent({
  loader: () => import('./Dashboard.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorPanel,
  delay: 200,    // ms before showing loading
  timeout: 5000  // ms before showing error
});

تقسيم الأجزاء في أداة التجميع

يتحول الاستيراد الديناميكي إلى جزء منفصل في المخرجات. استخدم التعليقات السحرية في Vite/webpack للتسمية والتحميل المسبق.

const Dashboard = defineAsyncComponent(
  () => import(/* webpackChunkName: 'dashboard' */ './Dashboard.vue')
);

التحميل الكسول على مستوى المسار

يدعم Vue Router المكونات غير المتزامنة مباشرةً في تعريفات المسارات.

const routes = [
  { path: '/',          component: () => import('./Home.vue') },
  { path: '/dashboard', component: () => import('./Dashboard.vue') },
  { path: '/admin',     component: () => import('./Admin.vue') }
];

مكوّن Suspense

يعرض <Suspense> التجريبي في Vue واجهة بديلة أثناء انتظار أي تبعية غير متزامنة في شجرته.

<template>
  <Suspense>
    <template #default>
      <Dashboard />
    </template>
    <template #fallback>
      <LoadingSpinner />
    </template>
  </Suspense>
</template>

setup() غير المتزامن

يمكن أن تكون setup() غير متزامنة، إذ ينتظر Vue اكتمالها قبل التصيير. ويعمل ذلك داخل Suspense.

<!-- AsyncPage.vue -->
<script setup>
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
await userStore.fetchProfile(); // top-level await
</script>

<!-- Parent uses Suspense to handle the await -->

معالجة الأخطاء باستخدام onErrorCaptured

استخدم onErrorCaptured في مكوّن أب لالتقاط الأخطاء الصادرة من المكونات غير المتزامنة أو setup غير المتزامنة.

import { onErrorCaptured } from 'vue';

onErrorCaptured((err, instance, info) => {
  console.error('Caught:', err, info);
  return false; // prevent propagation
});

الجمع بين Suspense وحدّ الأخطاء

أحط شجرة المكونات غير المتزامنة بكل من Suspense، لمعالجة التحميل، وسلف يلتقط الأخطاء، لمعالجة الأخطاء.

<template>
  <ErrorBoundary>
    <Suspense>
      <template #default><Dashboard /></template>
      <template #fallback><Spinner /></template>
    </Suspense>
  </ErrorBoundary>
</template>

Suspense تجريبية

اعتبارًا من Vue 3.4، لا تزال <Suspense> مصنّفة كتجريبية، وقد تتغير واجهتها البرمجية. أما المكونات غير المتزامنة نفسها (defineAsyncComponent) فهي مستقرة وجاهزة للاستخدام في الإنتاج.

متى تستخدم المكونات غير المتزامنة

المرشحون الجيدون: مكونات المسارات، ولوحات الإدارة والإعدادات، والنوافذ المنبثقة التي تُفتح عند الطلب، والرسوم البيانية والمحررات الثقيلة. تجنب استخدامها مع: المكونات الصغيرة، والمكونات المستخدمة في كل صفحة (قسّمها بطريقة أخرى).

تحقق سريع

ما دالة Vue 3 التي تحول الاستيراد الديناميكي إلى مكوّن يُحمّل كسولًا؟

مراجعة: المكونات غير المتزامنة وSuspense

تغلف defineAsyncComponent عمليات الاستيراد الديناميكي للتحميل الكسول. يمكنك تهيئة loadingComponent وerrorComponent وdelay وtimeout. تُخرج أدوات التجميع أجزاءً منفصلة. يتوفر التحميل الكسول على مستوى المسار عبر component: () => import('...'). تعرض <Suspense> واجهة بديلة أثناء حل التبعيات غير المتزامنة، لكنها لا تزال تجريبية. يعمل setup() غير المتزامن مع await على المستوى الأعلى داخل Suspense. تلتقط onErrorCaptured الأخطاء غير المتزامنة.

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

هل درس «المكوّنات غير المتزامنة وSuspense» مجاني؟

نعم — نص درس «المكوّنات غير المتزامنة وSuspense» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «المكوّنات غير المتزامنة وSuspense»؟

حمّل المكوّنات بشكل كسول باستخدام defineAsyncComponent، وغلّفها داخل ، واعرض محتوى بديلًا أثناء تحميل حزمة المكوّن تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «المكوّنات غير المتزامنة وSuspense»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Frontend Academy