-
-
Notifications
You must be signed in to change notification settings - Fork 5.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Memory leak when using functional components with Vue router in Vue 2.7.14 #3907
Comments
As noted in other issues in Vue-router repo (v3, not this repo), some dynamic component usage might increase memory usage once. Only if the memory continually increases, that’s a leak |
@posva The memory usage does continually increase! When repeating steps 2. and 3. five times I get five detached paragraph elements that do not get garbage collected! |
@posva Can you please reopen this issue? As I have pointed out in my last comment there is a continual increase of memory! If you don't plan to reopen this issue can you at least point me to some other resource where I can get help for this... |
You already opened vuejs/vue#13212 |
Reproduction
https://github.com/diegoexplicatis/vue-2-functional-component-memory-leak
Steps to reproduce the bug
See README.md of reproduction link
Project setup
Run project
How to reproduce 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
Expected behavior
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
Actual behavior
Instead the paragraph element is being retained when using
functional: true
and does not get garbage collected.Additional information
The text was updated successfully, but these errors were encountered: