Vue Academy · درس

المكوّنات غير المتزامنة باستخدام defineAsyncComponent

‏defineAsyncComponent() وloadingComponent وerrorComponent وخياري delay وtimeout

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

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

تتيح لكم defineAsyncComponent تحميل المكوّن بشكل كسول — إذ لا يُجلب رمزه إلا عند عرض المكوّن للمرة الأولى.

يتيح ذلك تقسيم الرمز على مستوى المسارات والمكونات، مما يقلل حجم الحزمة الأولية ويسرّع الرسم الأول.

صيغة دالة التحميل

تتطلب أبسط صيغة تمرير دالة تحميل تُعيد استيرادًا ديناميكيًا باستخدام import(). يقسم Vite/webpack هذا الاستيراد إلى جزء مستقل تلقائيًا.

<script setup>
import { defineAsyncComponent } from 'vue'

const SettingsModal = defineAsyncComponent(() =>
  import('./SettingsModal.vue')
)
</script>

<template>
  <SettingsModal v-if="showSettings" />
</template>

صيغة كائن الخيارات

لمزيد من التحكم، مرّروا كائن خيارات. الحقول الأساسية هي:

loader — دالة الاستيراد الديناميكي
loadingComponent — يُعرض أثناء التحميل
errorComponent — يُعرض عند فشل التحميل
delay / timeout — عناصر للتحكم في التوقيت

import { defineAsyncComponent } from 'vue'
import Loading from './Loading.vue'
import ErrorView from './ErrorView.vue'

const AsyncChart = defineAsyncComponent({
  loader: () => import('./Chart.vue'),
  loadingComponent: Loading,
  errorComponent: ErrorView,
  delay: 200,
  timeout: 5000
})

delay: تجنّب الظهور الخاطف لمؤشر التحميل

يحدد الخيار delay (وقيمته الافتراضية 200 مللي ثانية) المدة التي تنتظرها Vue قبل عرض loadingComponent. إذا حُمّل الجزء البرمجي خلال مدة أقصر من التأخير، فلن يظهر مؤشر التحميل إطلاقًا.

اضبطوا delay: 0 لعرض حالة التحميل فورًا.

const AsyncPanel = defineAsyncComponent({
  loader: () => import('./Panel.vue'),
  loadingComponent: Spinner,
  // wait 300ms before showing Spinner
  delay: 300
})

timeout: التعامل مع التحميلات البطيئة

يحدد الخيار timeout الحد الأقصى لمدة الانتظار. إذا لم تُحلّ دالة التحميل خلال timeout مللي ثانية، فسيُعرض errorComponent ويُسجّل خطأ.

لا توجد مهلة افتراضية، لذا يستمر التحميل إلى أجل غير مسمى.

const AsyncReport = defineAsyncComponent({
  loader: () => import('./Report.vue'),
  errorComponent: ErrorView,
  // fail if not loaded within 10s
  timeout: 10000
})

الاستدعاء onError

يُنفَّذ المعالج onError عندما تُرفض دالة التحميل. ويتلقى الخطأ، ودالة إعادة المحاولة، ودالة الفشل، وعدد المحاولات الحالية.

هنا تنفذون منطق إعادة المحاولة مع حدّ أقصى للشبكات غير المستقرة.

const AsyncWidget = defineAsyncComponent({
  loader: () => import('./Widget.vue'),
  onError(error, retry, fail, attempts) {
    if (attempts <= 3) {
      retry()   // try loading again
    } else {
      fail()    // give up, show errorComponent
    }
  }
})

قرار إعادة المحاولة أو الفشل

داخل onError يجب استدعاء واحدة فقط من retry() أو fail() (أو عدم استدعاء أي منهما، وهو ما يؤدي إلى الفشل أيضًا). تتمثل الاستراتيجية الشائعة في إعادة محاولة أخطاء الشبكة عدة مرات، مع الفشل فورًا عند حدوث خطأ في الصياغة أو الجزء البرمجي، إذ لا يمكن لإعادة المحاولة إصلاحه.

onError(error, retry, fail, attempts) {
  const isNetwork = /Loading chunk/.test(error.message)
  if (isNetwork && attempts <= 2) {
    retry()
  } else {
    fail()
  }
}

الاقتران مع Suspense

عندما يوجد مكوّن غير متزامن داخل حدّ Suspense، يتحكم الحدّ في حالة التحميل بدلًا من ذلك. في هذه الحالة، يتم تجاهل loadingComponent الخاص بالمكوّن — إذ تكون الأولوية للبديل الخاص بـ Suspense.

<template>
  <Suspense>
    <AsyncChart />  <!-- loadingComponent ignored here -->
    <template #fallback>Loading chart...</template>
  </Suspense>
</template>

تسمية الأجزاء البرمجية لتسهيل تصحيح الأخطاء

يمكنكم تسمية الجزء البرمجي المُنشأ باستخدام تعليق سحري. يجعل ذلك طلبات الشبكة وتقارير الحزمة أسهل قراءة.

const AsyncEditor = defineAsyncComponent(() =>
  import(
    /* webpackChunkName: "editor" */
    './RichTextEditor.vue'
  )
)

المكونات غير المتزامنة والخصائص

تقبل المكونات غير المتزامنة الخصائص وتصدر الأحداث تمامًا مثل المكونات العادية. تمرر Vue كل شيء بشفافية بعد اكتمال حل المكوّن الفعلي — ولا تحتاجون إلى تغيير موضع الاستدعاء.

<template>
  <AsyncProfile
    :user-id="id"
    @save="handleSave"
  />
</template>

<!-- AsyncProfile resolves to the real component, props/events pass through -->

أفضل ممارسة: استخدموا التحميل الكسول بحذر للمحتوى الظاهر أولًا

حمّلوا بشكل كسول المكونات خارج الشاشة، أو الموجودة خلف تفاعلات (مثل النوافذ المنبثقة وعلامات التبويب)، أو نادرة الاستخدام. تجنبوا التحميل الكسول لواجهة المستخدم المهمة الظاهرة أولًا — فقد تؤدي الرحلة الإضافية إلى الخادم إلى الإضرار بالأداء المُدرَك.

// Good candidate: modal only opened on click
const Modal = defineAsyncComponent(() => import('./Modal.vue'))

// Poor candidate: hero shown immediately on load
// import Hero directly instead

تحقق سريع

اختبروا مدى فهمكم لـ defineAsyncComponent.

مراجعة

تعلمتم تحميل المكونات غير المتزامنة باستخدام defineAsyncComponent:

تعيد صيغة دالة التحميل استيرادًا ديناميكيًا باستخدام import() لتقسيم الرمز
تضيف صيغة الخيارات loadingComponent وerrorComponent وdelay وtimeout
يمنع delay الظهور الخاطف لمؤشر التحميل، بينما يتسبب timeout في فشل التحميلات البطيئة
ينفذ onError(error, retry, fail, attempts) منطق إعادة المحاولة أو الفشل
داخل Suspense، يتولى بديل الحدّ واجهة التحميل

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

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

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

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

‏defineAsyncComponent() وloadingComponent وerrorComponent وخياري delay وtimeout تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

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

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

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

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

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

مكوّن Vue Suspense
المكوّنات غير المتزامنة باستخدام defineAsyncComponent
‏SSR المتدفق باستخدام renderToWebStream
استراتيجيات Hydration المؤجلة

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