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.

Sign up for GitHub

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

Jump to bottom

Memory leaks when using transition-group #13181

Open
alexeyvokin opened this issue Apr 9, 2025 · 3 comments · May be fixed by #13183
Open

Memory leaks when using transition-group #13181

alexeyvokin opened this issue Apr 9, 2025 · 3 comments · May be fixed by #13183
Labels
❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. scope: transition

Comments

@alexeyvokin
Copy link

alexeyvokin commented Apr 9, 2025 •
edited
Loading

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNqNUk1v2zAM/SusLrWB1M6Q7dI5wbqhwLbDNmw7Cghch3bVyJIgyU6CwP+9lNwkBfppwLbIRz4+UtyzK2OyvkN2yQpXWWE8OPSdWXAlWqOthz1YrGGA2uoWzin0/PMR+6Zb8wBkeTACVcC5qrRyxHWrNwrmgSKpS+kwJbDIx0pUgwyPrZGlR7IAipvOe63gSyVFtZ5zdiA4iwfOFl43jUTohRM3Qgq/K/IxJ7IRg7elcsILrS4aq2MnQE8RtfYXoj6wcgb5WDR/JoecJ2FswryjjmrRZHdOK5rWPmRyVhGrkGh/m5DtOLuEiASslFJvfkaftx1ODv7qFqv1M/47tw0+zv5YdGh75OyI+dI26Ef4+t8v3NL5CLZ61UmKfgX8i07LLmgcw752akWyH8VFtT/ivQrV/HfXW480lIemgtAQOcR4zuiew0Bfav0kd5Z9jHlcDTTFw468c91iHc5O++SRPuM6KdzAlbXlLplNl9NpfNOsFlIm9G9LkyTLCYgU5gtI9iBgSNO3tm8l+sV3pEFMoMVW2x1ILNdnRR6Apzux7NGGCVE3s+xT9mHGhnsA0RtH

Steps to reproduce

Toggle the visibility of the component and observe memory usage increasing. The detached element also remains in memory.

What is expected?

Memory should be cleaned up after the component is hidden. The detached element should be removed from memory as well.

What is actually happening?

Memory consumption increases when toggling component visibility. The number of detached elements also grows.

Image Image

System Info

System:
    OS: macOS 15.1.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 1.21 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
  Browsers:
    Chrome: 135.0.7049.84
    Safari: 18.1.1

Any additional comments?

This seems to be the related issue #12181
@edison1105
Copy link
Member

edison1105 commented Apr 9, 2025 •
edited
Loading

I can't reproduce it in Chrome v128.0.6613.120, but in Chrome v135.

Image

@alexeyvokin
Copy link
Author

I can't reproduce it in Chrome v128.0.6613.120, but in Chrome v135.

Image

Do you have any ideas on how to workaround this?
I’ve tested the demo again in incognito mode, and the problem is still reproducible.

2025-04-09.22.09.31_compressed.mp4

@dariasavinova
Copy link

@edison1105 hi, I was able to reproduce the same issue.

At first, I thought it was related to a large reactive state inside the Comp.vue component. But after simplifying Comp.vue to a bare template with no script section, the issue still persisted.

The more times I show and hide the component, the more detached nodes remain in memory.

Tested with:

Vue: 3.5.13
Chrome: 135.0.7049.85 (macOS, Apple Silicon)
Image

@edison1105 edison1105 linked a pull request Apr 10, 2025 that will close this issue
Open
@edison1105 edison1105 added scope: transition ❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. labels Apr 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. scope: transition
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(TransitionGroup): reset prevChildren to prevent memory leak vuejs/core
3 participants
@edison1105 @alexeyvokin @dariasavinova