onMounted() خُطاف اكتمال التحميل
آخر تحديث: 2026-10-22
onMounted() خُطاف اكتمال التحميل
تُستدعى onMounted() بعد تحميل المكوّن ومكوناته الأبناء إلى DOM: وهي الموقع القياسي للحصول على مراجع القوالب وتهيئة المكتبات الخارجية وإرسال الطلبات.
| المجموعة | خطافات دورة الحياة |
|---|---|
| النوع | API |
| النطاق | داخل المكوّن |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
onMounted(() => {
console.log(el.value.offsetWidth) // أصبح DOM جاهزًا
})⚙️ الوسائط
| callback | الدالة التي تُنفَّذ بعد التحميل |
|---|
القيمة المُرجعة：لا شيء
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
Shows the paragraph's real pixel width.💡 نقاط مهمة
💡 نصيحة ضع هنا تهيئة المكتبات الخارجية (رسوم بيانية، محررات)، وقياس DOM، وطلبات بيانات الشاشة الأولى.
⚠️ تحذير في بيئة SSR لا يُنفّذ الخادم onMounted (يُنفَّذ في المتصفح فقط)، فوضع المنطق المعتمد على DOM هنا يحمي من الأخطاء.
ℹ️ ملاحظة يُستدعى onMounted للأب بعد اكتمال تحميل جميع المكوّنات الأبناء.
🏷️ خطافات دورة الحياة ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س لماذا يُمتلك DOM هنا وليس داخل setup؟
ج عند تنفيذ setup لم يُعرَض المكوّن بعد؛ بينما تُطلق onMounted بعد اكتمال كتابة العرض.
س ما الفرق بينها وبين onUpdated؟
ج تُنفَّذ onMounted مرة واحدة فقط؛ بينما تُنفَّذ onUpdated مع كل تحديث للمكوّن.
س هل يمكن جعل رد النداء async؟
ج يمكن كتابة رد النداء كدالة async، لكن التسجيل بذاته يجب أن يكون استدعاءً تزامنيًا.
