Possible memory leak with Transition

miroljub1995 commented 1 week ago

Vue version

3.5.12

Link to minimal reproduction

https://play.vuejs.org/#eNqVU9uO0zAQ/ZXBL0mlkhQKLyUtLKuVgAdAbCVeLFUhdVrvOo5lO21RlG/go/gxxnbSbREqu1JuM+d4fMZz0pIrpZJdw8iMZKbQXFkwzDZqQSWvVK0ttKBZCR2Uuq4gQmp0hK63XKx7IEl95GpFb46M7zpXiunAoSRJ+4SjUYI8KotaGtx0W+8lzN1ecZkLw0YIZmmQhGIwsKxSIrcMI4DsR2NtLeFdIXhxP6dkKPDMf1CyaNu+6FuIPvA1i2AG0S1mIui6LA3rQ61elA8wDG3tnvNyqEsJpAO65jvEGEpcZCkGocTQGEZZeqKUjIk12GLJN8mdqSWec+sWUFLUleKC6S/KcjwCSmbgEYflQtT7Tz5ndcPGQ77YsuL+H/k7c3A5Sr5qZpje4dkeMZvrDbMBvrn9zA74fQSret0IZF8AvzFTi8ZpDLT3jVyj7BOeV/vRD5zLzdLcHCyTZmjKCXXMzvMpwclfX2j9Qe40eeXXUdnhKR7d9Uin+o0oeXCYZfgIBpNsD1da5z/j6WQ1mfh7lJRciBjfVa7ieDUGPoL5AuIWOHSj0X/8GIyxWG65AbwKpxa7av22iWByY7fed8Exf3vk5Ld4en+XfpOlznEU7pjP/eu97UdDegAhI2qLpvavnn3i8LNSZw38/oUtrHZMu6Gj/mnyOnnxknR/AOXRc60=

Steps to reproduce

Open Memory tab in dev tools and just click Show and Hide multiple times.

What is expected?

After Hide and Collect Gargabe memory should be reclaimed to around 100MB.

What is actually happening?

Memory allocation is continuously increasing without any notable decrease after Hide and Collect Gargabe. If I remove Transition, everything works okay.

System Info

System:
    OS: macOS 15.0.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 1.36 GB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.0 - /opt/homebrew/opt/node@20/bin/node
    npm: 10.8.2 - /opt/homebrew/opt/node@20/bin/npm
  Browsers:
    Chrome: 129.0.6668.91
    Safari: 18.0.1

Any additional comments?

No response

edison1105 commented 1 week ago

The current usage is not reasonable because the <div> inside the <Transition> does not undergo any insertions or removals, thus the transition animation will not be triggered. This scenario can be considered an edge case.

ferferga commented 1 week ago

@edison1105 I think the priority of this should be increased, because although the usage described is anomalous, toggling between VNodes it's an usual behaviour and actually encouraged (like in Vue Router). See this playground:

https://play.vuejs.org/#__PROD__eNrVVMFu2kAQ/ZXRXjAKsoG0F2rTpiiH9tBGKUdLkWvGsMl6be2uSSLkb+hH9cc6u8bYJBDlWmQM3nnzdt747ezYVVn62wrZjIU6Vbw0oNFU5TyWPC8LZWAHepMIUTzeYjaCtMjLyuAKashUkcOAcgefDuDFhovVdV6a533YD7olu89L7OQYNzmFmR5jpi0mlmkhtXE1FRKlgahXqzceEmaPqJSi+KIHbIV43hCiOexiCfThmXdg87eJqBCiKILxsAUAKGqPkj2ltItdrwGFRmKAkxSTMxST96VPz6RP23T7QzerOZZZJVPDCwmFXAiePpBGl/0e9ldxGB+XeA55cdHVQlcYNH4iJ9GDwbwUiUF6AgjL+aJ5Ix3HDHa7/pu0XYfPMHAtHsCsF6vrMLhpiH5XxpDML6lVGcVsrzdm82WxXgsMgwbRoJcqkZrbxrhnWulIZ1xT/kujEFEYHEANS3BEEwY9aWzEjCbLZXzt3+tC0qly3SJi4uAC1c/S5umYkd6mhpg5x353a0ZVOGrX0w2mDyfW7/WTXYvZjUKNaosxO8RMotZIZdvw9a8f+ET/D8G8WFWC0G8Eb1EXorI1NrCvlVxR2T2cq/abO55crpf6+skgtWMvyhbqrOjwMaOjapt5TnpX7qX/YW/hmrrYDYO3BpPCrJ1DbqeYdUPBIN0iC/EkPsKVUsmzdzm+G4/dd+hnXAiaEX6elJ53NwLu5oC3Aw71cGjP0RsOJhus+Ha+3HANdKW2XJg4D9uNfYFybTbOqRb32ibdJPuPBE7fK/Dvn1biYfBbmcdDoMmzB+p0i+62qKyvKPPS/+hPpqz+B463N1M=

In fact, #12182 doesn't fix my case

edison1105 commented 1 week ago

@ferferga Thank you for providing the demo. I acknowledge that there is a memory issue present. However, it is important to note that the memory usage and detached DOM nodes do not continuously grow and eventually stabilize. Therefore, it does not strictly qualify as a memory leak.

fixed via https://github.com/vuejs/core/pull/12182/commits/ec2fcec0899056672ca9c32fc2ea0730fb3f0365 Please feel free to review.

ferferga commented 1 week ago

@edison1105 Thank you very much as always!

That commit does indeed fix the issue if I introduce a copy of ChildEmpty at the end of the toggling cycle.

However, even if it's not technically a leak as you mention, it's (in my opinion) not an efficient usage of resources either and a behaviour people would expect to belong to KeepAlive. Not sure if there's a known room for improvement here but you just tried to fix the leak or you're not sure how to properly improve this.

vuejs / core