Vue Academy · درس

‏onMounted وonBeforeMount

الوصول إلى DOM في onMounted، وسبب ندرة الحاجة إلى الاستخدام المباشر لـ onBeforeMount

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

الخطافات المحيطة بالتركيب

تتضمن مرحلة التركيب خطافين: يُستدعى onBeforeMount قبل إنشاء DOM مباشرةً، ويُستدعى onMounted بعد إدراجه مباشرةً. قد يبدوان متشابهين، لكن لكل منهما استخدامات مختلفة جدًا.

onMounted: DOM جاهز

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

<script setup>
import { ref, onMounted } from 'vue'
const box = ref(null)
onMounted(() => {
  console.log(box.value.offsetWidth)
})
</script>

حالة استخدام: تهيئة مخطط

تحتاج المكتبات التي ترسم داخل عنصر DOM إلى وجود هذا العنصر أولًا. هيّئوها داخل onMounted، مع تمرير عنصر المرجع.

<script setup>
import { ref, onMounted } from 'vue'
const canvas = ref(null)
onMounted(() => {
  const ctx = canvas.value.getContext('2d')
  // draw chart with ctx
})
</script>

حالة استخدام: قياسات DOM

تتطلب قراءة الأحجام أو المواضع أو إزاحات التمرير وجود DOM حقيقي. ويُعدّ onMounted أول نقطة آمنة لقياس عنصر.

onMounted(() => {
  const rect = box.value.getBoundingClientRect()
  console.log(rect.height)
})

حالة استخدام: جلب البيانات الأولي

يُعدّ جلب البيانات عند ظهور المكوّن مهمة نموذجية لـ onMounted. خزّنوا النتيجة في مرجع حتى يُحدّث القالب عند وصولها.

<script setup>
import { ref, onMounted } from 'vue'
const posts = ref([])
onMounted(async () => {
  const res = await fetch('/api/posts')
  posts.value = await res.json()
})
</script>

يُشغَّل onMounted مرة واحدة

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

onBeforeMount: قبل الإدراج مباشرةً

يُشغَّل onBeforeMount بعد الإعداد، وقبل إنشاء DOM. تكون الحالة التفاعلية موجودة، لكن مراجع القالب تظل null لأنه لم يُعرض أي شيء بعد.

<script setup>
import { onBeforeMount } from 'vue'
onBeforeMount(() => {
  console.log('about to render')
})
</script>

لماذا نادرًا ما نحتاج إلى onBeforeMount

يمكن إجراء معظم أعمال الإعداد مباشرةً في <script setup>، الذي يُشغَّل أصلًا قبل التركيب، كما يجب تأجيل كل ما يتعلق بـ DOM إلى onMounted. لذلك لا يتبقى لـ onBeforeMount سوى استخدامات عملية قليلة.

خطأ شائع

تؤدي محاولة الوصول إلى مرجع قالب داخل setup أو onBeforeMount إلى الحصول على null. فلا يوجد العنصر حتى يكتمل التركيب. انقلوا دائمًا الوصول إلى DOM إلى onMounted.

<script setup>
import { ref } from 'vue'
const input = ref(null)
console.log(input.value) // null - too early!
</script>

تسجيل عدة خطافات

يمكنكم استدعاء onMounted أكثر من مرة؛ إذ تُشغَّل جميع عمليات الاستدعاء بالترتيب. ولهذا يمكن لكل composable تسجيل onMounted الخاص به بشكل مستقل.

onMounted(() => console.log('first'))
onMounted(() => console.log('second'))

الاختيار بينهما

onMounted: يكون DOM متاحًا — للمخططات والقياسات والتركيز وجلب البيانات.
onBeforeMount: خطاف ما قبل العرض، من دون DOM، ونادرًا ما تكون هناك حاجة إليه.

اختبار سريع

اختبروا معرفتكم بخطافات التركيب.

مراجعة

ملخص خطافات التركيب:

يُشغَّل onMounted بعد إدراج DOM — فاستخدموه لتهيئة المخططات والقياسات والتركيز وعمليات الجلب الأولية.
يُشغَّل مرة واحدة لكل نسخة، ويمكن تسجيله عدة مرات.
يُشغَّل onBeforeMount قبل العرض من دون إمكانية الوصول إلى DOM، ونادرًا ما تكون هناك حاجة إليه.

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

هل درس «‏onMounted وonBeforeMount» مجاني؟

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

ماذا ستتعلم في «‏onMounted وonBeforeMount»؟

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

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

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

كم من الوقت يستغرق درس «‏onMounted وonBeforeMount»؟

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

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

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

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

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