Skip to content
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

Closed
diegoexplicatis opened this issue Sep 19, 2024 · 4 comments

Comments

@diegoexplicatis
Copy link

diegoexplicatis commented Sep 19, 2024

Reproduction

https://github.com/diegoexplicatis/vue-2-functional-component-memory-leak

Steps to reproduce the bug

See README.md of reproduction link

Project setup
npm install
Run project
npm run serve

How to reproduce memory leak

  1. Open base url of project (printed in console)

  2. Click on "Go to Test Component"

  3. Click on Home

  4. Open developer tools and take a heap snapshot
    take_heapsnaphot

  5. Filter for "Objects retained by detached DOM nodes"
    filter

  6. See there are detached elements, e.g. a paragraph element with id = testParagraph.
    detached

  7. Manually trigger garbage collection
    garbage_collection

  8. Take another heap snapshot and filter for "Object retained by detached DOM nodes" again

  9. 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)
    not_collected

  10. Go to FunctionalComponent.vue to line 4 and change the parameter for functional to "false"

  11. Redo steps 1 - 8

  12. See that there are not detached elements (even without manually garbage collecting) => all elements have been properly garbage collected
    no_detached

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

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 6.27 GB / 23.86 GB
Binaries:
    Node: 18.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.5.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
    Edge: Chromium (128.0.2739.79)
    Internet Explorer: 11.0.19041.4355
npmPackages:
    vue: ^2.7.14 => 2.7.16
Copy link
Member

posva commented Sep 19, 2024

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 posva transferred this issue from vuejs/router Sep 19, 2024
@posva posva closed this as not planned Won't fix, can't repro, duplicate, stale Sep 19, 2024
@diegoexplicatis
Copy link
Author

diegoexplicatis commented Sep 19, 2024

@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!
Screenshot 2024-09-19 121649

@diegoexplicatis
Copy link
Author

@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...

@posva
Copy link
Member

posva commented Sep 23, 2024

You already opened vuejs/vue#13212
If this is important to you, try coming up with a PR or upgrade to Vue 3
Herodevs can help you out with Vue 2 support

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants