A component which is a memory leak will cause all components of the routing page to fail to be destroyed normally. If it is in a large component, it will cause serious performance problems‼️

[JonasVon]

Vue version

3.5.14

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-ufk2envs?file=src%2Fmain.vue

Steps to reproduce

1. Click the "EmptyPage" button to enter the EmptyPage page, open the browser Memory panel and Performance monitoring panel Performance monitor, record memory snapshots and record DOM Nodes (Memory: 18.1MB, DOM Nodes: 53)
2. Click the "TestElSelect" button, enter the TestElSelect page, trigger the drop-down box of the Select component (you can trigger one or more, feel free), click the "EmptyPage" button, go back to the EmptyPage page, record a memory snapshot and record DOM Nodes (Memory: 20.9MB, DOM Nodes: 325)
3. Repeat the above operation several times and find that the memory and DOM Nodes have been increasing.
   The above steps can prove that there is a memory leak in the el-select component ‼️
   If a route page which useing a el-select component, it will cause all of the component from this page will not destroy. More and more DOM Node will stay in the memory‼️
4. Click the "TestTable" button to enter the TestTable page(which including el-select and el-table component), trigger the drop-down box of the Select component, open the browser Memory panel and Performance monitoring panel Performance monitor, record memory snapshots and record DOM Nodes.
5. Return to EmptyPage page, record memory snapshots again. You will find that the DOM Node of the el-table is not destroyed, and the memory is getting larger and larger.

What is expected?

I expect the component instance and vnode corresponding to the component that "did not experience a memory leak" to be destroyed normally.

What is actually happening?

A component which is memory leak will cause all over the route page component can't not destroy.

System Info

Any additional comments?

No response

[JonasVon]

⚠️If you keep switching routes, DOM Node and memory will keep increasing.

[edison1105]

Please first file the bug in the element-plus repository, or provide a reproduction that doesn't includes element-plus

[edison1105]

see element-plus/element-plus#19061 (comment)

[JonasVon]

The current phenomenon is that if a component memory leaks, the entire component tree cannot be destroyed. In the above example, in a large list component (including a large list and a select component), if the select component is triggered, the entire component tree cannot be destroyed, resulting in a surge in DOM Node and memory. I would like to ask if vue can avoid this phenomenon? (
Is this phenomenon because the vnode chain is a doubly linked list, and if a vnode cannot be destroyed, its associated vnodes cannot be destroyed, because vnodes can refer to associated nodes through attributes such as parent)

see element-plus/element-plus#19061 (comment)