onWatcherCleanup() تسجيل دالة تنظيف للمستمع
آخر تحديث: 2026-10-22
onWatcherCleanup() تسجيل دالة تنظيف للمستمع
تُسجّل onWatcherCleanup() دالة تنظيف تُستدعى قبل أن يفقد المستمع صلاحيته (عند إعادة تنفيذه أو إيقافه)، وتُستخدم لإلغاء الطلبات والمؤقتات وغيرها.
| المجموعة | التفاعلية: الأساس |
|---|---|
| النوع | API |
| النطاق | داخل المكوّن |
| إصدار Vue | 3.5+ |
| دعم SSR | مدعوم |
📝 الصيغة
watch(keyword, async () => {
const controller = new AbortController()
onWatcherCleanup(() => controller.abort())
const res = await fetch(url, { signal: controller.signal })
})⚙️ الوسائط
| cleanupFn | دالة التنظيف، تُنفّذ قبل أن يفقد المستمع صلاحيته |
|---|
القيمة المُرجعة：لا شيء (تُستدعى داخل رد نداء المستمع)
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
Typing fast shows only the final result after a 600ms pause — earlier ones are cancelled.💡 نقاط مهمة
⚠️ تحذير لا يجوز استدعاؤها إلا في المرحلة التزامنية من رد نداء المستمع: الاستدعاء بعد await يُخطئ، فسجّلها مسبقًا.
💡 نصيحة المعامل الثالث onCleanup في رد نداء watch مكافئ لهذه الدالة، وكلتا الصيغتين شائعتان.
ℹ️ ملاحظة سيناريوهات نموذجية: منع تكرار البحث (debounce)، إلغاء الطلبات المتزاحمة، وتنظيف إعادة اتصال WebSocket.
🏷️ الأساس ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ماذا يحدث دون تنظيف؟
ج تستمر الطلبات/المؤقتات القديمة في العمل: قد تصل استجابة قديمة بطيئة متأخرة وتطغى على النتيجة الجديدة، وهي الحالة التزاحمية النموذجية.
س ما الفرق بينها وبين onUnmounted؟
ج تُنفّذ onWatcherCleanup التنظيف قبل كل إعادة تنفيذ للمستمع؛ بينما تُنفّذ onUnmounted مرة واحدة عند إلغاء تحميل المكوّن.
س هل يمكن استخدامها داخل watchEffect؟
ج نعم، تدعمها watchEffect أيضًا (ويمكن لرد ندائها كذلك استقبال معامل onCleanup).
