Vue Academy · درس

نظرة عامة على مراحل دورة الحياة

الإنشاء، والتركيب، والتحديث، وإلغاء التركيب — ما يحدث في كل مرحلة

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

للمكوّن دورة حياة

يمر كل مكوّن في Vue برحلة يمكن التنبؤ بها: يُنشأ، ثم يُركَّب في الصفحة، ثم يُحدَّث مع تغيّر البيانات، وأخيرًا يُزال. هذه هي مراحل دورة الحياة، ويتيح لك Vue إضافة خطافات إلى كل مرحلة منها.

المراحل الأربع

الإنشاء — تُنفَّذ setup وتُهيَّأ التفاعلية.
التركيب — يُنشأ DOM ويُدرج.
التحديث — تؤدي التغييرات التفاعلية إلى إعادة التصيير.
إلغاء التركيب — يُزال المكوّن وتُنظَّف موارده.

المرحلة 1: الإنشاء

أولًا، يُنشأ مثيل المكوّن وتُوصَل التفاعلية. في Composition API، تُنفَّذ <script setup> (أو setup()) هنا. ولا يكون DOM موجودًا بعد، لذلك لا يمكنك قراءة العناصر في هذه المرحلة.

ما يمكنك فعله أثناء الإنشاء

يُعدّ الإنشاء وقتًا مناسبًا لتعريف الحالة التفاعلية وبدء العمل غير المعتمد على DOM، مثل بدء جلب البيانات. تذكّر فقط أن القالب لم يُصيَّر بعد، لذا تظل مراجع DOM فارغة.

<script setup>
import { ref } from 'vue'
const user = ref(null)
// fetch can start here
</script>

المرحلة 2: التركيب

ينشئ Vue بعد ذلك عقد DOM الفعلية من القالب ويدرِجها في الصفحة. بعد التركيب، تشير مراجع القالب إلى عناصر فعلية، ويمكنك قياس DOM أو تعديله.

خطاف التركيب

يعمل onMounted مرة واحدة، مباشرة بعد إدراج المكوّن. وهذا هو المكان المناسب لإعداد يعتمد على DOM، مثل تهيئة مخطط أو التركيز على حقل إدخال.

<script setup>
import { onMounted } from 'vue'
onMounted(() => {
  console.log('in the DOM now')
})
</script>

المرحلة 3: التحديث

عندما تتغير البيانات التفاعلية التي يعتمد عليها المكوّن، يعيد Vue تصيير DOM ويحدّثه بكفاءة — فلا يغيّر إلا الأجزاء التي تغيّرت. ويمكن أن تحدث دورة التحديث هذه مرات عديدة خلال حياة المكوّن.

خطافات التحديث

يعمل onBeforeUpdate قبل تحديث DOM مباشرة، بينما يعمل onUpdated بعده مباشرة. ويُستدعيان عند كل تغيير تفاعلي يؤثر في التصيير.

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log('DOM patched')
})
</script>

المرحلة 4: إلغاء التركيب

عند إزالة مكوّن — عبر v-if أو تغيير المسار أو إزالة عنصر من قائمة — يفككه Vue. وهذه فرصتك لتنظيف المؤقتات والمستمعين والاشتراكات لتجنب تسرّب الذاكرة.

خطاف إلغاء التركيب

يعمل onUnmounted بعد اختفاء المكوّن. ألغِ الفواصل الزمنية، وأزل المستمعين العامّين، وأوقف الطلبات الجارية هنا.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>

الترتيب الكامل

تُستدعى الخطافات بهذا الترتيب خلال حياة المكوّن: setup، ثم onBeforeMount وonMounted، ثم أزواج onBeforeUpdate/onUpdated المتكررة، وأخيرًا onBeforeUnmount/onUnmounted.

اختبار سريع

تأكّدوا من استيعابكم لدورة الحياة.

مراجعة

أصبحتم الآن ترون الصورة كاملة:

الإنشاء: يُنفَّذ الإعداد، وتصبح التفاعلية جاهزة، ولا يكون DOM موجودًا.
التركيب: يُنشأ DOM ويُدرج؛ وتصبح المراجع قابلة للاستخدام.
التحديث: يؤدي التغيير التفاعلي إلى تحديث فعّال.
إلغاء التركيب: تتم إزالة المكوّن؛ أجروا التنظيف هنا.

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

هل درس «نظرة عامة على مراحل دورة الحياة» مجاني؟

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

ماذا ستتعلم في «نظرة عامة على مراحل دورة الحياة»؟

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

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

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

كم من الوقت يستغرق درس «نظرة عامة على مراحل دورة الحياة»؟

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

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

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

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

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