nextTick() انتظار اكتمال تحديث DOM
آخر تحديث: 2026-10-22
nextTick() انتظار اكتمال تحديث DOM
تُعيد nextTick() وعداً (Promise) يتحقق بعد اكتمال تحديث DOM القادم: استخدمها عندما تعدّل البيانات وتريد قراءة أحدث DOM مباشرة.
| المجموعة | واجهة API العامة |
|---|---|
| النوع | API |
| النطاق | عام |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
await nextTick()
console.log(el.value.textContent) // أصبح الأحدث⚙️ الوسائط
| callback? | دالة رد اختيارية (يُنصح بـ await في الشيفرة الجديدة) |
|---|
القيمة المُرجعة：وعد Promise (يتحقق بعد تحديث DOM)
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
Clicking confirms the DOM already shows the new value.💡 نقاط مهمة
ℹ️ ملاحظة تحديثات DOM في Vue تجميعية غير متزامنة: قراءة DOM فور تغيير البيانات تُعطي القيمة القديمة، ولهذا وُجدت.
💡 نصيحة تغييرات البيانات المتعددة في نفس الحدث تُدمج في تحديث واحد، فتكفي واحدة nextTick.
⚠️ تحذير المزامنة المستمرة التي يمكن التعبير عنها بـ watchPostEffect لا تُبنى بتكديس nextTick.
🏷️ واجهة API العامة ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س لماذا يبقى DOM قديماً بعد تعديل البيانات؟
ج التحديثات تُجمَّع في المهام الدقيقة (microtasks)؛ انتظر nextTick واحدة لترى DOM الجديد.
س ما الفرق عن setTimeout؟
ج تعمل nextTick في توقيت المهام الدقيقة، أسرع وأدق؛ بينما setTimeout مهمة كبيرة (macrotask) بتوقيت غير مضبوط.
س هل تستخدم واجهة التركيب نفس الدالة؟
ج نعم، nextTick متاحة عالمياً دون تمييز بين الأسلوبين.
