watchPostEffect() أثر جانبي بعد تحديث المكوّن
آخر تحديث: 2026-10-22
watchPostEffect() أثر جانبي بعد تحديث المكوّن
تكافئ watchPostEffect() watchEffect مع flush: 'post': تُنفّذ بعد تحديث DOM للمكوّن، ومناسبة لقراءة أبعاد DOM بعد التحديث.
| المجموعة | التفاعلية: الأساس |
|---|---|
| النوع | API |
| النطاق | داخل المكوّن |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
watchPostEffect(() => {
console.log(el.value.offsetHeight) // تم تحديث DOM
})⚙️ الوسائط
| effect | دالة الأثر الجانبي؛ الخيارات مطابقة لـ watchEffect (دون flush) |
|---|
القيمة المُرجعة：دالة stop() لإيقاف الاستماع
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
Shows the paragraph height; it follows font-size changes.💡 نقاط مهمة
💡 نصيحة تُنفّذ watchEffect الافتراضية قبل تحديث DOM، فقراءة معلومات التخطيط مثل offsetHeight تُعيد قيمًا قديمة — وهذا ما تعالجه هذه الوظيفة.
ℹ️ ملاحظة إضافة { flush: 'post' } إلى watchEffect تكافئ هذه الدالة تمامًا.
⚠️ تحذير عند الاعتماد على مراجع DOM تأكد من تحميل ref أولًا (قد تكون null في البداية) وتحقق من عدم الفراغ في الشيفرة.
🏷️ الأساس ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ما الفرق عن watchEffect في سطر واحد؟
ج توقيت التنفيذ: watchEffect قبل تحديث DOM، وwatchPostEffect بعده.
س متى يجب استخدامها؟
ج عند قراءة أبعاد العنصر أو موضع التمرير أو التركيز وغيرها من العمليات التي تعتمد على أحدث DOM.
س هل يمكن استخدام nextTick بديلًا عنها؟
ج للقراءة لمرة واحدة يكفي await nextTick()؛ أما لمتابعة التغيّرات باستمرار فاستخدم watchPostEffect.
