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

ما هي خطافات دورة الحياة؟

تسمح خطافات دورة الحياة في Nuxt.js للمطورين بتنفيذ التعليمات البرمجية في مراحل محددة من عمليات تهيئة التطبيق وعرضه وتدميره. يمكن استخدام هذه الخطافات لإدارة جلب البيانات غير المتزامنة، أو التعامل مع الآثار الجانبية، أو تشغيل التحولات، من بين مهام أخرى.

خطافات دورة الحياة الرئيسية في Nuxt.js

1. البيانات غير المتزامنة

• عندما يتم استدعاؤه: قبل تهيئة المكون على كل من الخادم والعميل.
• ما يتم استخدامه من أجله: يسمح لك بجلب البيانات بشكل غير متزامن وإدخالها في المكون الخاص بك. لا يستطيع هذا الخطاف الوصول إلى هذا، ولكن يمكنك إرجاع كائن سيتم دمجه مع بيانات المكون.

export default {
  async asyncData({ params }) {
    const data = await fetchData(params.id)
    return { data }
  }
}

2. أحضر

• عندما يتم استدعاؤه: فقط أثناء العرض من جانب الخادم وقبل إنشاء المكون.
• ما يتم استخدامه من أجله: على عكس asyncData، يتمتع هذا الخطاف بإمكانية الوصول إلى هذا، لذا يمكنك جلب البيانات وتعيينها مباشرةً إلى خصائص المكونات.

export default {
  async fetch() {
    this.data = await fetchData(this.$route.params.id)
  }
}

3. مخلوق

• عندما يتم استدعاؤه: بعد إنشاء مثيل المكون (على كل من العميل والخادم).
• ما يتم استخدامه من أجله: إنه مكان جيد لتهيئة حالة المكون أو تشغيل الإجراءات التي لا تعتمد على عرض DOM.

export default {
  created() {
    console.log('Component is created!')
  }
}

4. شنت

• عندما يتم استدعاؤه: بعد تثبيت المكون على DOM، ولكن فقط من جانب العميل.
• الغرض من استخدامه: هذا هو الرابط المثالي للعمليات المتعلقة بـ DOM، مثل تهيئة مكتبات الطرف الثالث التي تعتمد على وجود عناصر HTML.

export default {
  mounted() {
    console.log('Component is mounted to the DOM!')
  }
}

5. قبل التدمير

• عندما يتم استدعاؤه: مباشرة قبل تدمير المكون (على كل من العميل والخادم).
• ما يتم استخدامه من أجله: يمكنك استخدام هذا الخطاف لإجراء أي عمليات تنظيف، مثل إزالة مستمعي الأحداث.

export default {
  beforeDestroy() {
    console.log('Cleaning up resources...')
  }
}

6. nuxtServerInit

• عندما يتم استدعاؤه: هذا إجراء خاص في متجر Vuex، يتم تشغيله قبل العرض من جانب الخادم.
• ما يتم استخدامه من أجله: يسمح لك بملء المتجر بالبيانات المتاحة قبل تقديم التطبيق على الخادم.

export const actions = {
  async nuxtServerInit({ commit }) {
    const data = await fetchInitialData()
    commit('setData', data)
  }
}

ملخص خطافات دورة الحياة

• من جانب الخادم فقط: asyncData، fetch، nuxtServerInit
• من جانب العميل فقط: تم التثبيت
• تم إنشاء كل من العميل والخادم: قبل التدمير

خاتمة

تعد خطافات دورة حياة Nuxt.js أدوات قوية للتحكم في سلوك تطبيقك في مراحل مختلفة من عملية العرض. إن فهم متى وكيف يتم استخدامها سيساعدك على تحسين الأداء وتجربة المستخدم لتطبيقك.