Vue: Kebocoran Memori Saat Menggunakan Komponen Async

Versi: kapan

2.5.17

Tautan reproduksi

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

Langkah-langkah untuk mereproduksi

1. Muat reproduser dan ambil snapshot heap memori. Mencari heap, Anda akan menemukan 4 VueComponents (App, Container, Child, Async Child)
   

2. Klik tombol Hancurkan. Ini mematikan v-if yang akan menghapus komponen Child dan juga komponen AsyncChild.

3. Pada titik ini, halaman diperbarui seperti yang diharapkan
4. Ambil snapshot heap memori lainnya. Cari heap lagi untuk "VueComponent" dan Anda akan melihat bahwa 4 VueComponents masih ada
   
   

Apa yang diharapkan?

Setelah menghancurkan komponen Child, komponen tersebut dan komponen turunannya yang dimuat secara asinkron harus dihancurkan dan memori dibebaskan.

Apa yang sebenarnya terjadi?

Vue berpegang pada referensi konteks yang mencegah komponen-komponen ini dari pengumpulan sampah

Ini terjadi karena logika komponen-asinkron yang ada di sini: https://github.com/vuejs/vue/blob/52719ccab8fccffbdf497b96d3731dc86f04c1ce/src/core/vdom/helpers/resolve-async-component.js#L57 -L68

Dalam fungsi forceRender di baris 64, setelah memanggil $ forceUpdate, larik konteks harus dikosongkan untuk membebaskan referensi tersebut sehingga komponen akan dapat sampah dikumpulkan di lain waktu