شرح دوال Lifecycle Hooks في Vue

السلام عليكم ورحمة الله تعالى وبركاته،

من الأفضل الاطلاع على التوثيق الرسمي ل Vue js كي لا تغيب عنك أي معلومة رسمية متعلقة بهذه الدوال ومختلف التحدييات التي تطرأ عليها.

بالنسبة لهذه الدوال التي أشرت إليها ففي Vue وخصوصا Vue 3 هناك ما يسمى بدورة حياة المكوّن (Component Lifecycle)، وهي سلسلة من المراحل يمر بها أي مكون Vue من لحظة إنشائه وحتى إزالته.

وتسمح لك Vue بتنفيذ شيفرة في نقاط معينة أثناء هذه المراحل باستخدام دوال خاصة تسمى "Lifecycle Hooks" سأشرح لك كل دالة منها على حدى:

• beforeCreate

تستدعى مباشرة بعد إنشاء المكون ولكن قبل تهيئة البيانات (data) وخصائص reactivity ولا يمكنك بعد الوصول إلى data أو methods أو props هنا كما أنها تستخدم في حالات نادرة جدا، مثل تسجيل الأحداث أو قراءة إعدادات خارجية.

• created

تستدعى بعد تهيئة البيانات والخصائص التفاعلية ولكن قبل تركيب المكون في ال DOM يمكنك هنا استخدام البيانات (data) والوظائف (methods) وال props مثل جلب بيانات من API أو إعداد مؤقت (setInterval).

• beforeMount

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

• mounted

وتستدعى عندما يركب المكون بشكل كامل في الصفحة ولآن يمكن التفاعل مع عناصر DOM مثل التعديل عليها أو استخدام مكتبات تتطلب وجود العنصر فعليا مثل تهيئة مكتبة خارجية مثل خريطة أو تقويم.

• beforeUpdate

تستدعى عندما يحدث تغيير في البيانات وقبل أن تُحدث Vue التغييرات على DOM وهي جد مفيدة إن كنت تحتاج إلى اتخاذ إجراء قبل تحديث العنصر، مثل حفظ القيمة القديمة.

• updated

وتستدعى بعد انتهاء التحديث في DOM نتيجة لتغير البيانات كما أنها جد مفيدة للتعامل مع DOM بعد التحديث، أو مقارنة الحالة الجديدة مع القديمة.

• beforeUnmount

تستدعى قبل إزالة المكون من الصفحة كما يمكنك فيها تنفيذ عمليات تنظيف مثل إيقاف مؤقت، أو فصل مستمعات الأحداث.

• unmounted

تستدعى بعد إزالة المكون بالكامل من الـ DOM  كما أنها تستخدم لإنهاء الاتصال بأي شيء خارجي أو تنظيف نهائي.

هذه الدوال التي ذكرتها تعرف باسم Lifecycle Hooks أو "دورة حياة المكون" في Vue.js. وهي تستخدم في مكونات Vue للتحكم في سلوك المكون أثناء مراحله المختلفة من دورة حياته من أول إنشاء المكون إلى حين إزالته.

beforeCreate : يتم تنفيذها قبل أن يتم إنشاء المكون وقبل تهيئة البيانات data والأحداث eventsو الخصائص props و لا يمكنك الوصول إلى this.data أو this.methods أو this.computed هنا لأنها لم تنشأ بعد.

created : يتم تنفيذها بعد إنشاء الكائن (instance) وتهيئة data وmethodsو لكن قبل تركيب (mounting) المكون على ال DOM وهنا يمكنك الوصول إلى data و computed و methods.

beforeMount :يتم تنفيذها بعد معالجة القالب (template) وقبل أن يتم إضافته في ال DOM وهنا كل شيء جاهز يومكنك الوصول إليه ولكن لم يتم بعد ربط المكون بال DOM.

mounted :ويتم تنفيذها بعد أن يتم ربط المكون فعليا بال DOM أى ظهوره في الصفحة وكل شيء متاح والمكون الآن ظاهر للمستخدم ويمكن التفاعل معه.

beforeUpdate : ويتم تنفيذها عندما يحدث تغيير في البيانات التي ستؤدي إلى إعادة تحديث (re-render) المكون وقبل تنفيذ التحديث في ال DOM.

updated: ويتم تنفيذها بعد أن يتم تحديث المكون في ال DOM نتيجة لتغير البيانات.

beforeUnmount : ويتم تنفيذها قبل إزالة المكون من ال DOM .

unmounted : ويتم تنفيذها بعد إزالة المكون فعليا من ال DOM.

وإليك المزيد من التفاصيل :

هذه الدوال يطلق عليها تسمية دوال دورة حياة المكونات فمثلا beforeCreate تعتبر أول دالة تُستدعى قبل إنشاء المكون تماماً، حيث لا تكون البيانات أو الطرق متاحة بعد، وتُستخدم لإعداد plugins خارجية أو HTTP interceptors

أما created تُستدعى بعد تهيئة البيانات لكن قبل إدراج المكون في DOM، وهي المكان المثالي لاستدعاء APIs وجلب البيانات الأولية. في حين beforeMount تحدث قبل إدراج المكون في DOM مباشرة ونادراً ما تُستخدم.

بخصوص mounted تُستدعى بعد إدراج المكون في DOM وهي النقطة المثالية للتفاعل مع عناصر DOM وتهيئة المكتبات الخارجية وبدء المؤقتات بينما beforeUpdate تحدث عند تغيير البيانات وقبل إعادة رسم DOM، مفيدة لحفظ حالة العناصر مثل scroll position

وأما updated فتُستدعى بعد تحديث DOM ويجب تجنب تعديل البيانات فيها لمنع الحلقات اللانهائية.

beforeUnmount (أو beforeDestroy في نسخة Vue 2) هي الفرصة الأخيرة لتنظيف الموارد قبل إزالة المكون، حيث تُستخدم لإلغاء المؤقتات وإزالة event listeners وإغلاق WebSocket connections. unmounted أو destroyed في Vue 2 كما تُستدعى بعد إزالة المكون تماماً وتُستخدم للتنظيف النهائي وإرسال analytics events.

تم الشرح في التعليقات السابقة بشكل مفصل وإليك أيضاً مثال للتوضيح أكثر كالتالي

<script>
export default {
  data() {
    return {
      task: '',
      tasks: [],
      timer: null
    };
  },

  // 1. قبل التهيئة
  beforeCreate() {
    console.log('beforeCreate: لم يتم تهيئة البيانات بعد');
  },

  // 2. بعد التهيئة (البيانات أصبحت متاحة)
  created() {
    console.log('created: البيانات أصبحت متاحة');
    // محاكاة جلب بيانات من API
    setTimeout(() => {
      this.tasks = ['قراءة كتاب', 'مراجعة الكود'];
      console.log('تم تحميل المهمات');
    }, 1000);
  },

  // 3. قبل تركيب المكون في DOM
  beforeMount() {
    console.log('beforeMount: القالب سيُركب');
  },

  // 4. بعد تركيب المكون في DOM
  mounted() {
    console.log('mounted: المكون جاهز في DOM');
    this.$refs.taskInput.focus();

    // تشغيل مؤقت
    this.timer = setInterval(() => {
      console.log('الوقت يمر...');
    }, 2000);
  },

  // 5. قبل التحديث (عند تغيير البيانات)
  beforeUpdate() {
    console.log(' beforeUpdate: البيانات ستتغير');
  },

  // 6. بعد التحديث
  updated() {
    console.log(' updated: تم تحديث الواجهة');
  },

  // 7. قبل إلغاء تثبيت المكون
  beforeUnmount() {
    console.log(' beforeUnmount: تنظيف قبل إزالة المكون');
    clearInterval(this.timer); // إيقاف المؤقت
  },

  // 8. بعد إلغاء تثبيت المكون
  unmounted() {
    console.log(' unmounted: تم إزالة المكون نهائيًا');
  },

  
};
</script>

يمكنك إضافة الأكواد السابقة في تطبيق بسيط ثم راقب الكونسول لترى متى يتم استدعاء كل Hook