search

vuejs / vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
http://v2.vuejs.org
MIT License
207.97k stars 33.68k forks source link

Memory leak when using functional components in Vue 2.7.14 #13212

Open diegoexplicatis opened 1 month ago

diegoexplicatis commented 1 month ago

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
npm install
Run project
npm run serve
How to reproduct 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

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

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

Any additional comments?

No response

LinusBorg commented 1 month ago

Vue 2 is no longer being maintained.