Detached nodes after v-if component(Memory leaks)

[hao-kuai]

Vue version

3.5.16

Link to minimal reproduction

https://github.com/hao-kuai/vue3-memory-leak-vif

Steps to reproduce

1. Start the application by running pnpm dev.
2. Open the application in your browser (e.g., http://localhost:5173).
3. Open the browser's Developer Tools and select the "Memory" tab.
4. Click the "Click me" button repeatedly. This will mount and unmount a DOM element.
5. Take a heap snapshot after several clicks.
6. Click the button several more times.
7. Take another heap snapshot.
8. Compare the snapshots. If there is a memory leak, you will see an increase in the number of detached HTMLDivElement objects in the second snapshot.

What is expected?

no detached objects

What is actually happening?

an increase in the number of detached HTMLDivElement objects

System Info

MacOS 15.5
M3 air
Chrome ：137.0.7151.69 (arm64)

Any additional comments?

Although it is similar to 12306, I did not reproduce the Chrome issue in demo, so I hope you don't close the issue directly.

[edison1105]

Strictly speaking, this cannot be considered a memory leak, because the number of detached nodes does not continue to increase. The el is cached on the component instance's renderCache. and when the component is unmounted, the el is released.

a workaround: disabled hoistStatic

plugins: [vue({ template: { compilerOptions: { hoistStatic: false } } })]

[hao-kuai]

Strictly speaking, this cannot be considered a memory leak, because the number of detached nodes does not continue to increase. The el is cached on the component instance's renderCache. and when the component is unmounted, the el is released.

a workaround: disabled hoistStatic

plugins: [vue({ template: { compilerOptions: { hoistStatic: false } } })]

1. the number of detached nodes continue to increase by click more times.
2. Since the number of detached nodes will increase, how to reclaim related resources? This is just a demo. In actual projects, the number of affected nodes will be much higher. How to solve the problem?
3. What is the function of hoistStatic configuration? I did not find any relevant documentation in vite-plugin-vue
4. Is there a way to release resources manually?

[edison1105]

hoistStatic: false is the recommended way to fix this.

the detached nodes do not continue to increase.

Kapture.2025-06-11.at.10.17.14.mp4

• snap1 -> snap2, only one detached
• snap2 -> snap3, no more detached node increase

---

Is there a way to release resources manually?

here is a trick, but not recommended, because it's not a public API and may not work in the feature.

const instance = getCurrentInstance()
function handleClick() {
  instance.renderCache = []
  visible.value = !visible.value
}