Vue Academy · درس

خطافات دورة الحياة وجلب البيانات

اجلب البيانات في الوقت المناسب ضمن دورة حياة المكوّن

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

متى نجلب البيانات؟

للمكوّنات دورة حياة: تُنشأ، وتُضاف إلى DOM، وتُحدّث، ثم تُزال في النهاية. يساعدك تحديد hook دورة الحياة المناسب لجلب البيانات على إبقاء تطبيقك سريع الاستجابة وسليمًا.

الـ hook‏ created

يُنفَّذ hook‏ created بعد إعداد البيانات التفاعلية، وقبل إدراج المكوّن في DOM. ويُعد مكانًا مناسبًا لبدء جلب البيانات، لأن التفاعلية تكون قد أصبحت جاهزة.

export default {
  data() {
    return { posts: [] }
  },
  created() {
    this.fetchPosts()
  }
}

الـ hook‏ mounted

يُنفَّذ hook‏ mounted بعد إدراج المكوّن في DOM. استخدمه عندما يحتاج منطق الجلب إلى الوصول إلى عناصر DOM أو إلى مكتبات خارجية تتطلب عنصرًا معروضًا.

export default {
  mounted() {
    this.fetchPosts()
    // template refs are now available here
  }
}

created أم mounted

كلاهما مناسب لجلب البيانات فقط. يُنفَّذ created قبل الآخر بقليل، ولذلك يبدأ الطلب في وقت أبكر. اختر mounted فقط عندما تحتاج فعلًا إلى DOM المعروض. وبالنسبة إلى معظم استدعاءات API، فكلاهما مناسب.

onMounted في Composition API

في Composition API، تكون hooks دورة الحياة دوال مستوردة تُستدعى داخل setup. والمكافئ لـ mounted هو onMounted.

import { ref, onMounted } from "vue"
import { api } from "./api"

export default {
  setup() {
    const posts = ref([])
    onMounted(async () => {
      const res = await api.get("/posts")
      posts.value = res.data
    })
    return { posts }
  }
}

نمط حالة التحميل

تستغرق طلبات الشبكة وقتًا. تتبّع علامة loading كي تعرض مؤشرًا أثناء وصول البيانات وتخفيه عند الانتهاء.

data() {
  return {
    posts: [],
    loading: false
  }
}

تبديل حالة التحميل

اضبط loading على true قبل الطلب، ثم أعده إلى false بعده، بصرف النظر عن النتيجة.

async fetchPosts() {
  this.loading = true
  try {
    const res = await api.get("/posts")
    this.posts = res.data
  } finally {
    this.loading = false
  }
}

عرض مؤشر التحميل

في القالب، استخدم شرطًا يعتمد على علامة التحميل لعرض مؤشر أو رسالة أثناء وصول البيانات.

<template>
  <p v-if="loading">Loading...</p>
  <ul v-else>
    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  </ul>
</template>

التعامل مع النتائج الفارغة

خطّط دائمًا لاحتمال الحصول على استجابة فارغة. اعرض رسالة ودية عندما لا تحتوي القائمة التي جُلبت على أي عناصر.

<ul v-if="posts.length">
  <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
<p v-else>No posts found.</p>

نمط التحميل في Composition API

يمكن تطبيق نمط التحميل نفسه بسهولة في Composition API باستخدام refs.

const posts = ref([])
const loading = ref(false)

async function load() {
  loading.value = true
  try {
    posts.value = (await api.get("/posts")).data
  } finally {
    loading.value = false
  }
}

onMounted(load)

عرض البيانات التي جُلبت

بمجرد وضع البيانات في حالة تفاعلية، يعرضها القالب تلقائيًا. اجمع بين حالات التحميل والبيانات والنتائج الفارغة للحصول على تجربة مستخدم متقنة.

<template>
  <section>
    <p v-if="loading">Loading...</p>
    <ul v-else-if="posts.length">
      <li v-for="p in posts" :key="p.id">{{ p.title }}</li>
    </ul>
    <p v-else>Nothing here yet.</p>
  </section>
</template>

اختبار سريع

اختبر معلوماتك حول hooks دورة الحياة وجلب البيانات.

مراجعة

اجلب البيانات في created أو mounted، أو في onMounted عند استخدام Composition API. تتبّع علامة loading باستخدام try/finally كي تتمكن واجهة المستخدم من عرض مؤشر التحميل وعرض البيانات والتعامل مع النتائج الفارغة. ستجعل هذه الطلبات بعد ذلك أكثر متانة من خلال التعامل مع الأخطاء واستخدام interceptors.

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

هل درس «خطافات دورة الحياة وجلب البيانات» مجاني؟

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

ماذا ستتعلم في «خطافات دورة الحياة وجلب البيانات»؟

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

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

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

كم من الوقت يستغرق درس «خطافات دورة الحياة وجلب البيانات»؟

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

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

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

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

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