You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Filter for "Objects retained by detached DOM nodes"
See there are detached elements, e.g. a paragraph element with id = testParagraph.
Manually trigger garbage collection
Take another heap snapshot and filter for "Object retained by detached DOM nodes" again
See that e.g. the paragrpah is still being retained => paragraph element has leaked (it is detached from the DOM but is not being garbage collected)
Go to FunctionalComponent.vue to line 4 and change the parameter for functional to "false"
Redo steps 1 - 8
See that there are not detached elements (even without manually garbage collecting) => all elements have been properly garbage collected
Repeatedly executing steps 2. and 3. leads to an increasing memory usage i.e. repeating the steps five times leads to five detached paragraph elements that do not get garbage collected!
What is expected?
I would expect that after executing steps 1-8, e.g. the paragraph element is not being retained anymore and has been garbage collected independent of the value for the functional parameter in FunctionComponent.vue
What is actually happening?
Instead the paragraph element is being retained when using functional: true and does not get garbage collected.
Vue version
2.7.14
Link to minimal reproduction
https://github.com/diegoexplicatis/vue-2-functional-component-memory-leak
Steps to reproduce
See README.md of reproduction link
Project setup
Run project
How to reproduct memory leak
Open base url of project (printed in console)
Click on "Go to Test Component"
Click on Home
Open developer tools and take a heap snapshot
Filter for "Objects retained by detached DOM nodes"
See there are detached elements, e.g. a paragraph element with id = testParagraph.
Manually trigger garbage collection
Take another heap snapshot and filter for "Object retained by detached DOM nodes" again
See that e.g. the paragrpah is still being retained => paragraph element has leaked (it is detached from the DOM but is not being garbage collected)
Go to FunctionalComponent.vue to line 4 and change the parameter for functional to "false"
Redo steps 1 - 8
See that there are not detached elements (even without manually garbage collecting) => all elements have been properly garbage collected
Repeatedly executing steps 2. and 3. leads to an increasing memory usage i.e. repeating the steps five times leads to five detached paragraph elements that do not get garbage collected!
What is expected?
I would expect that after executing steps 1-8, e.g. the paragraph element is not being retained anymore and has been garbage collected independent of the value for the functional parameter in FunctionComponent.vue
What is actually happening?
Instead the paragraph element is being retained when using
functional: true
and does not get garbage collected.System Info
Any additional comments?
No response
The text was updated successfully, but these errors were encountered: