Vue: 非同期コンポーネント使用時のメモリリーク

バージョン

2.5.17

複製リンク

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

再現する手順

1. 再生装置をロードし、メモリヒープのスナップショットを作成します。 ヒープを検索すると、4つのVueComponents（App、Container、Child、Async Child）が見つかります。
   

2. [破棄]ボタンをクリックします。 これにより、v-ifが切り替わり、子コンポーネントが削除され、AsyncChildコンポーネントも削除されます。

3. この時点で、ページは期待どおりに更新されます
4. 別のメモリヒープスナップショットを取ります。 ヒープで「VueComponent」を再度検索すると、4つのVueComponentがまだ存在していることがわかります。
   
   

何が期待されますか？

子コンポーネントを破棄した後、コンポーネントとその非同期にロードされた子コンポーネントを破棄し、メモリを解放する必要があります。

実際に何が起こっているのですか？

Vueは、これらのコンポーネントがガベージコレクションされるのを防いでいるコンテキスト参照を保持しています

これは、次の場所にあるresolve-async-componentロジックが原因で発生しています： https ：

64行目のforceRender関数で、$ forceUpdateを呼び出した後、コンテキスト配列をクリアしてこれらの参照を解放し、コンポーネントを後でガベージコレクションできるようにする必要があります。