دليل التعامل مع دورة حياة المكونات (Lifecycle Hooks) في Vue 3

أهلاً بك يا صديقي المبرمج. لو بدأت رحلتك مع Vue 3، أكيد مريت بالموقف اللي بتقول فيه: "يا ترى الكود ده أكتبه فين عشان يشتغل أول ما الصفحة تفتح؟" أو "إزاي أوقف التايمر ده قبل ما المستخدم يسيب الصفحة عشان الجهاز ميهنجش؟". دي الحيرة اللي بيقابلها كل مطور ويب (Web Developer) في البداية، وهنا بييجي دور الـ Lifecycle Hooks.

الـ Lifecycle Hooks هي ببساطة زي "محطات" المكون (Component) بتاعك بيعدي عليها من أول ما يتولد لحد ما يتمسح من الذاكرة. فهمك للمحطات دي هو الفرق بين كود سريع ونظيف، وبين كود مليان "بجز" (Bugs) ومشاكل في الأداء.

يعني إيه أصلاً Lifecycle Hooks؟

تخيل المكون (Component) كأنه كائن حي، بيمر بمراحل: ولادة (Creation)، ظهور على الشاشة (Mounting)، تحديث (Updating)، وموت أو مسح (Unmounting). في Vue 3، عندنا دوال جاهزة بنستدعيها عشان ننفذ كود معين في كل مرحلة من دول.

المرحلة الأولى: الظهور (onMounted)

دي أشهر محطة، وأكثر واحدة هنستخدمها. الـ onMounted بتشتغل فوراً بعد ما المكون بتاعك يترسم (Render) في الـ DOM. دي المكان الصح عشان تعمل:

• طلب بيانات من الـ API (Fetch Data).
• تشغيل مكتبات خارجية بتحتاج وجود الـ DOM (زي مكتبات الخرائط أو الرسوم البيانية).
• التركيز على حقل إدخال (Focusing input).

import { onMounted } from 'vue';

onMounted(() => {
  console.log('المكون ظهر خلاص، يلا نجيب البيانات!');
});

المرحلة الثانية: التحديث (onUpdated)

لما حالة المكون (State) تتغير، الـ DOM بيعمل لنفسه تحديث تلقائي. لو محتاج تعمل عملية معينة كل ما البيانات تتغير، الـ onUpdated هي طلبك. بس خلي بالك، استخدمها بحذر عشان متدخلش في "Loop" غير منتهي لو غيرت الحالة جواها.

import { onUpdated } from 'vue';

onUpdated(() => {
  console.log('المكون اتحدث بسبب تغيير في الـ State!');
});

المرحلة الثالثة: الوداع (onUnmounted)

دي أهم مرحلة عشان تحافظ على أداء التطبيق. لما المكون يختفي من الصفحة (زي لما المستخدم ينتقل لصفحة تانية)، لازم ننظف ورانا. لو عملت Event Listener أو Interval أو Timer، لازم توقفهم هنا عشان متعملش Memory Leak.

import { onMounted, onUnmounted } from 'vue';

let timer;

onMounted(() => {
  timer = setInterval(() => { console.log('شغال...'); }, 1000);
});

onUnmounted(() => {
  clearInterval(timer);
  console.log('تم تنظيف الذاكرة بنجاح!');
});

نصيحة من أخ لمطور واعد

نصيحتي ليك يا بطل: متعتمدش على الحفظ. جرب تفتح الـ Console بتاع المتصفح (Browser DevTools) وأضف console.log في كل Hook وشوف بنفسك الترتيب اللي بيحصل فيه. كمان، دايماً اسأل نفسك: "هل فعلاً محتاج أعمل ده في الماونت؟ ولا ممكن أعمله في مرحلة تانية؟". البرمجة مش بس كتابة كود، دي ممارسة وفهم عميق للـ Performance.

استمر في التعلم، والـ Vue 3 عالم ممتع جداً بمجرد ما تتقن الأدوات دي.