إزاي تتجنب تسريب الذاكرة (Memory Leaks) في تطبيقات Vue 3 وتخلي موقعك طيارة
أكيد مريت بالموقف ده قبل كده: تطبيقك شغال زي الفل في البداية، ومع الوقت وبما إن المستخدم بيتنقل بين الصفحات، بتلاحظ إن المتصفح بيبدأ "يهنج" (Lag) أو استهلاك الـ RAM بيزيد بشكل غريب. ده يا صديقي غالباً بيكون بسبب تسريب الذاكرة (Memory Leaks)، والسبب الرئيسي في كتير من الأحيان هو الـ Event Listeners أو الـ Timers اللي بتفضل شغالة في الخلفية حتى بعد ما المكون (Component) يختفي من الصفحة. النهاردة هنتكلم عن إزاي نسيطر على الموضوع ده في Vue 3.
Table of contents [Show]
ليه تسريب الذاكرة (Memory Leaks) بيحصل أصلاً؟
لما بنعمل Listener زي window.addEventListener أو بنستخدم setInterval جوه مكون في Vue، المتصفح بيفضل محتفظ بيهم في الذاكرة حتى لو المكون ده خلاص ملوش وجود في الـ DOM. ده بيخلي الـ Garbage Collector بتاع المتصفح مش قادر يمسح المكون من الذاكرة لأن في "خيط" لسه رابط بينهم. النتيجة؟ تراكم المكونات دي في الذاكرة بيسبب بطء شديد في أداء التطبيق (Performance Degradation).
الخطر الخفي: الـ Event Listeners والـ Timers
في Vue 3 ومع استخدام Composition API، بقينا بنكتب كود أنضف، بس المسؤولية زادت علينا شوية. لو عملت addEventListener في الـ onMounted، لازم وبشكل إجباري تشيله في الـ onUnmounted.
بص على المثال ده للكود اللي بيسبب مشكلة:
// كود بيسبب تسريب ذاكرة - أوعى تعمل كده!
import { onMounted } from 'vue';
onMounted(() => {
window.addEventListener('resize', handleResize);
});
الكود اللي فوق ده لو المكون اتفتح واتقفل كتير، كل مرة هيتضاف فيها Listener جديد للـ window، وتخيل بقى لو عندك 100 مرة، الـ handleResize هيتنفذ 100 مرة في نفس اللحظة! كارثة حقيقية.
الحل السحري: التنظيف (Cleanup) في Vue 3
الحل بسيط جداً وهو استخدام دالة onUnmounted عشان نلغي كل الحاجات اللي عملناها. بص على التصحيح ده:
import { onMounted, onUnmounted } from 'vue';
const handleResize = () => console.log('Resizing...');
onMounted(() => {
window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
});
كده إنت ضمنت إن بمجرد ما المكون يختفي من الواجهة، المتصفح هينظف وراه ويمسح الـ Listener ده من الذاكرة، والتطبيق بتاعك هيفضل خفيف وسريع.
نصائح احترافية لتجنب الـ Memory Leaks
- استخدم الـ Timers بحذر: لو بتستخدم
setTimeoutأوsetInterval، خزن الـ ID بتاعهم في متغير واستخدمclearTimeoutأوclearIntervalفي الـonUnmounted. - الـ Third-party Libraries: لو بتستخدم مكتبة خارجية زي
Chart.jsأوLeaflet، اتأكد إنك بتعملdestroy()للمكتبة دي لما المكون يختفي، لأنهم غالباً بيعملوا اتصالات مستمرة بالـ DOM. - الـ Events المخصصة (Custom Events): لو بتبعت بيانات بين المكونات عبر الـ Event Bus، متنساش تعمل
offللـ Event ده عشان متفضلش الـ Callback شغالة في الفراغ.
خاتمة ونصيحة من أخوك المبرمج
يا بطل، المبرمج الشاطر مش بس اللي بيكتب كود بيطلع "نتيجة"، المبرمج الشاطر هو اللي بيكتب كود "مسؤول" عن موارده (Resources). الـ Memory Leaks ممكن تبان حاجة بسيطة في البداية، بس في المشاريع الكبيرة (Enterprise Applications)، هي اللي بتفرق بين تطبيق احترافي وتطبيق بيقع بعد ساعة شغل. اتعود دايماً تسأل نفسك: "هل الحاجة اللي أنا فتحتها دي، أنا قافلها ومظبطها؟".
طور مهاراتك في أدوات الـ Profiling اللي في متصفحك (Chrome DevTools -> Memory Tab)، وشوف بعينك إيه اللي بيتحجز في الذاكرة، دي أحسن طريقة تتعلم بيها فعلياً.
