Vue: تسرب الذاكرة عند استخدام مكونات غير متزامنة

الإصدار

2.5.17

رابط الاستنساخ

https://codesandbox.io/s/4k43rylw0

خطوات التكاثر

1. قم بتحميل الناسخ وأخذ لقطة لكومة الذاكرة. عند البحث في الكومة ، ستجد 4 VueComponents (تطبيق ، حاوية ، طفل ، Async Child)
   

2. انقر فوق الزر إتلاف. يؤدي هذا إلى تبديل v-if الذي سيزيل المكون الفرعي وبالتالي مكون AsyncChild أيضًا.

3. في هذه المرحلة ، يتم تحديث الصفحة بالشكل المتوقع
4. خذ لقطة أخرى لكومة الذاكرة. ابحث في الكومة مرة أخرى عن "VueComponent" وسترى أن 4 VueComponents لا تزال موجودة
   
   

ما هو متوقع؟

بعد إتلاف المكون التابع ، يجب إتلاف المكون والمكون الفرعي الذي تم تحميله بشكل غير متزامن وتحرير الذاكرة.

ما الذي يحدث بالفعل؟

يحتفظ Vue بمرجع السياق الذي يمنع هذه المكونات من جمع القمامة

يحدث هذا بسبب منطق حل عدم التزامن الموجود هنا: https://github.com/vuejs/vue/blob/52719ccab8fccffbdf497b96d3731dc86f04c1ce/src/core/vdom/helpers/resolve-async-component.js#L57 -L68

في وظيفة forceRender في السطر 64 ، بعد استدعاء $ forceUpdate ، يجب مسح مصفوفة السياقات لتحرير تلك المراجع بحيث يمكن تجميع المكونات غير المرغوب فيها في وقت لاحق