Description
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
-
Open base url of project (printed in console)
-
Click on "Go to Test Component"
-
Click on Home
-
See there are detached elements, e.g. a paragraph element with id = testParagraph.
-
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
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