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

كل نسخة من مكون Vue تمر بمجموعة من الخطوات الإعدادية عند إنشائها - على سبيل المثال ، يحتاج إلى إعداد مراقبة البيانات وتجميع القالب ووصل النسخة على الـDOM وتحديثه عند تغيير البيانات. على طول الطريق ، يقوم أيضًا بتشغيل الدوال المسماة خطافات دورة الحياة ، مما يمنح المستخدمين فرصة لإضافة الشيفرة الخاصة بهم في مراحل محددة.

تسجيل خطافات دورة الحياة ​

على سبيل المثال ، يمكن استخدام onMountedmounted لتشغيل الشيفرة بعد انتهاء التصيير الأولي للمكون وإنشاء عقد الـDOM:

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`المكون مُوصّل الآن.`)
})
</script>

export default {
  mounted() {
    console.log(`المكون مُوصّل الآن.`)
  }
}

يوجد أيضًا خطافات أخرى ستستدعى في مراحل مختلفة من دورة حياة النسخة ، والأكثر شيوعًا هي onMounted، onUpdated، و onUnmounted.mounted، updated، و unmounted.

setTimeout(() => {
  onMounted(() => {
    // هذا لن يشتغل
  })
}, 100)

الرسم البياني للخطافات ​

أدناه رسم بياني لدورة حياة النسخة. لا تحتاج إلى فهم كل شيء بالضبط الآن ، ولكن عندما تتعلم وتبني المزيد ، سيكون مرجعًا مفيدًا.

اطلع على مرجع واجهة برمجة التطبيقات لخطافات دورة الحياةمرجع واجهة برمجة التطبيقات لخطافات دورة الحياة للحصول على تفاصيل عن جميع خطافات دورة الحياة وحالات استخدامها .