Vue Academy · درس

‏onUnmounted وأنماط التنظيف

مسح الفواصل الزمنية، وإزالة مستمعي الأحداث، وإلغاء الطلبات في onUnmounted

الدرس 4 من 413 خطوة

‏onUnmounted وأنماط التنظيف درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

التنظيف بعد الانتهاء

عند إزالة مكوّن، فإن كل ما بدأه — المؤقتات والمستمعات والاشتراكات وطلبات الشبكة — يستمر في العمل ما لم توقفوه. ويُعدّ خطاف onUnmounted المكان المناسب للتنظيف، لمنع تسرّبات الذاكرة والأخطاء.

خطاف onUnmounted

يُستدعى onUnmounted بعد إزالة المكوّن من DOM. وهذه آخر فرصة لتحرير الموارد.

<script setup>
import { onUnmounted } from 'vue'
onUnmounted(() => {
  console.log('component removed')
})
</script>

نمط: مسح الفواصل الزمنية

إذا بدأتم فاصلًا زمنيًا في onMounted، فامسحوه في onUnmounted. وإلا فسيستمر الاستدعاء في العمل بعد اختفاء المكوّن، وغالبًا ما يتسبب في تعطّله عند محاولة الوصول إلى حالة غير موجودة.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>

نمط: إزالة مستمعات الأحداث

تبقى المستمعات العامة على window أو document بعد إزالة المكوّن. احرصوا دائمًا على إقران addEventListener بـ removeEventListener.

<script setup>
import { onMounted, onUnmounted } from 'vue'
function onResize() {}
onMounted(() => window.addEventListener('resize', onResize))
onUnmounted(() => window.removeEventListener('resize', onResize))
</script>

نمط: إلغاء طلبات الجلب

قد يؤدي طلب معلّق يكتمل بعد إلغاء التركيب إلى تعيين حالة لمكوّن لم يعد موجودًا. استخدموا AbortController لإلغائه أثناء التنظيف.

<script setup>
import { onMounted, onUnmounted } from 'vue'
const controller = new AbortController()
onMounted(() => {
  fetch('/api/data', { signal: controller.signal })
})
onUnmounted(() => controller.abort())
</script>

نمط: إلغاء الاشتراك

يجب إنهاء الاشتراكات في المخازن أو المقابس أو حافلات الأحداث. احفظوا دالة إلغاء الاشتراك واستدعوها في onUnmounted.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let unsubscribe
onMounted(() => { unsubscribe = store.subscribe(handler) })
onUnmounted(() => unsubscribe && unsubscribe())
</script>

يعيد watch دالة إيقاف

يعيد استدعاء watch دالة توقفه. وتتوقف المراقبات المُنشأة أثناء الإعداد تلقائيًا، لكن المراقبات المُنشأة لاحقًا، مثل تلك الموجودة داخل عملية استدعاء أخرى، ينبغي إيقافها يدويًا.

<script setup>
import { watch, onUnmounted } from 'vue'
const stop = watch(source, handler)
onUnmounted(() => stop())
</script>

دالة تنظيف watchEffect

تتلقون داخل watchEffect دالة onCleanup لإجراء التنظيف قبل التشغيل التالي أو عند الإيقاف. وهذا يحافظ على ترتيب الموارد الخاصة بكل تشغيل.

watchEffect((onCleanup) => {
  const timer = setTimeout(doWork, 500)
  onCleanup(() => clearTimeout(timer))
})

أهمية التنظيف

يؤدي تخطي التنظيف إلى تسرّبات الذاكرة (موارد لا يتم تحريرها مطلقًا)، ومستمعات مكررة (تتراكم عمليات التركيب المتعددة)، وأخطاء (عمليات استدعاء تصل إلى حالة مدمَّرة). تنظّف الشفرة الجيدة دائمًا كل ما تُنشئه.

تجعل composables العملية تلقائية

تسجّل composables المكتوبة جيدًا عملية التنظيف الخاصة بها في onUnmounted. ولهذا تزيل composables في VueUse، مثل useEventListener، المستمع نيابةً عنكم — فالتنظيف مضمّن فيها.

قائمة التحقق من التنظيف

setInterval/setTimeout -> امسحوهما.
addEventListener -> أزيلوه.
fetch -> ألغوه باستخدام AbortController.
الاشتراكات -> استدعوا دالة إلغاء الاشتراك.
المراقبات اليدوية -> استدعوا دالة الإيقاف المُعادة.

اختبار سريع

اختبروا معرفتكم بالتنظيف.

أجب عليها في الدرس التفاعلي

مراجعة

أساسيات التنظيف:

يُشغَّل onUnmounted بعد الإزالة — حرّروا الموارد هنا.
امسحوا الفواصل الزمنية والمهلات، وأزيلوا المستمعات، وألغوا طلبات الجلب، وألغوا الاشتراكات.
يعيد watch دالة إيقاف لاستدعائها في onUnmounted عند الحاجة.
يوفّر watchEffect ردّ استدعاء onCleanup للتنظيف الخاص بكل تشغيل.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 42
الدروس: 156

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «‏onUnmounted وأنماط التنظيف» مجاني؟

نعم — نص درس «‏onUnmounted وأنماط التنظيف» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «‏onUnmounted وأنماط التنظيف»؟

مسح الفواصل الزمنية، وإزالة مستمعي الأحداث، وإلغاء الطلبات في onUnmounted تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «‏onUnmounted وأنماط التنظيف»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy