onUpdated() خُطاف اكتمال التحديث
آخر تحديث: 2026-10-22
onUpdated() خُطاف اكتمال التحديث
تُستدعى onUpdated() بعد أن يُعيد المكوّن العرض بسبب تغيّر تفاعلي ويُحدَّث DOM: مناسبة لقراءة أبعاد DOM بعد التحديث أو مزامنة المكتبات الخارجية.
| المجموعة | خطافات دورة الحياة |
|---|---|
| النوع | API |
| النطاق | داخل المكوّن |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
onUpdated(() => {
// أصبح DOM في أحدث حالة
})⚙️ الوسائط
| callback | الدالة التي تُنفَّذ بعد اكتمال التحديث |
|---|
القيمة المُرجعة：لا شيء
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
The height figure follows the font-size changes.💡 نقاط مهمة
⚠️ تحذير لا تعدّل الحالة داخل هذا الخطاف مطلقًا: سيُطلق ذلك جولة تحديث جديدة ويشكّل حلقة لا نهائية.
💡 نصيحة عند الحاجة إلى تتبع تغيّر بيانات محددة بدقة يُفضَّل watch/watchPostEffect، أما هذا الخطاف فيناسب فقط السيناريوهات «المطلوبة بعد كل تحديث» (مثل إعادة حساب التخطيط).
ℹ️ ملاحظة يُطلق onUpdated للمكوّن الأب بعد تحديث مكوّناته الأبناء.
🏷️ خطافات دورة الحياة ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س لماذا يؤدي تعديل البيانات هنا إلى حلقة لا نهائية؟
ج التعديل يُطلق جولة تحديث جديدة، فيُنفَّذ الخطاف مجددًا ويعدّل مجددًا، وهكذا دواليك.
س ما علاقتها بـ nextTick؟
ج من حيث توقيت التنفيذ يقع onUpdated في مرحلة «بعد اكتمال تحديث DOM»، وهي نفس توقيت ما بعد await nextTick().
س متى تكون ضرورية؟
ج عندما تتطلب كل تغيّرات البيانات مزامنة قياس DOM/مكتبة خارجية ولا يمكن تعداد الاعتماديات المحددة.
