Vue: Memory Leak When Using Synchronous Loading With Async Components

[adrienbaron]

Version

2.5.21

Reproduction link

https://codesandbox.io/s/xlly27wy8z

Steps to reproduce

Same as: https://github.com/vuejs/vue/issues/8740

• Load the reproduction link in Chrome
• Open Chrome Dev Tools
• Go to the memory tab
• Click on the "Destroy" button
• Take a "Heap Snapshot"
• Filter to look for "Detached HTMLDivElement"
• You should see 2 leaking HTMLDivElement

What is expected?

Context for loading the Async component should be cleared.

What is actually happening?

There are 2 components still attached to a context of an Async loading Component.
It is not cleared if the Async component is loaded synchronously.

---

This is the same issue as https://github.com/vuejs/vue/issues/8740. However the fix for it only fixes the case when loading is actually async. Synchronous async loading does not call the "forceRender" (https://github.com/vuejs/vue/commit/2e472c5e5e559a7a4083b4164ffe0c3911ce0651#diff-293f31f6a318619ad803b971ef0724a3R64) so the contexts array is not cleared.
I can try to fix it and submit a PR if needed.

[adrienbaron]

Hi! No news on this issue, is it fine if I try to do a PR for it? :)

[posva]

Hey, sorry for the delay. I haven't checked the repro yet but if you already know about the fix, yes, feel free to submit the PR and thank you! 🙂

[adrienbaron]

No problem it's the holidays ^^. I'll see to do that this afternoon!

[adrienbaron]

@posva PR submitted 👍 : #9275