onBeforeUpdate() خُطاف ما قبل التحديث

آخر تحديث: 2026-10-22

onBeforeUpdate() خُطاف ما قبل التحديث

تُستدعى onBeforeUpdate() بعد تغيّر البيانات التفاعلية وقبل تحديث DOM مباشرة: عندئذ يمكن قراءة حالة DOM قبل التحديث.

المجموعةخطافات دورة الحياة
النوعAPI
النطاقداخل المكوّن
إصدار Vue3.0+
دعم SSRمدعوم

📝 الصيغة

onBeforeUpdate(() => {
  // لا يزال DOM في حالته القديمة
})

⚙️ الوسائط

callbackالدالة التي تُنفَّذ قبل التحديث

القيمة المُرجعة:لا شيء

▶ مثال

عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:

المخرجات:

Each click records the stale DOM first, then the view refreshes.

💡 نقاط مهمة

ℹ️ ملاحظة استخدامها قليل التواتر: معظم متطلبات «القراءة قبل التحديث» يغطيها watch مع watchPostEffect.
⚠️ تحذير تعديل البيانات هنا يُطلق جولة تحديث إضافية ويسهل تشكيل حلقة، فكن حذرًا في الإسناد.
المزيد من الحالات قريباً.

📚 دروس ذات صلة

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

س أيّهما أولًا: هذا الخطاف أم تحديث DOM؟
ج الخطاف أولًا: يحدث تحديث DOM بعده مباشرة، فما يُقرأ هنا هو DOM القديم.
س هل يمكن منع التحديث هنا؟
ج لا، فـ Vue لا يوفّر آلية إلغاء؛ وإذا احتجت عرضًا شرطيًا فاستخدم v-if.
س ما الفرق بينها وبين watch مع flush: 'pre'؟
ج التوقيت نفسه (قبل DOM)، لكن watch تستمع إلى بيانات محددة وتوفّر القيمتين القديمة والجديدة، بينما هذا الخطاف بلا معاملات.
Web-Tutorial.com

فريق Web-Tutorial التقني

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

100%