Memory leak problem with (Dom Node) Download

[YusufEminDemirci]

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNqlU02P2jAQ/StWTiBBzGp7orASqfawrdRW2x5zMclgzDq25XFSEOK/d2wI0O0WVdocEHnvzeTN1z5bOJd3LWTTbBagcVoEeCgNo2f2BcAttOp6IIGVbZw1YAKbKpyX2fm9zBjvI/l16IxfJaZXrLxygSGE1jEtjKQsAcuMWEW5fGAFW3nbsDLLeRHNldnHM7e4cIvX3J7hWmhtfz3Dih16YS8qjYbAvG0DsDmbEFJZg4FdKppfxQ8WwxRDNp9MAN8JPRgM2fyB7Y9FqhUbnJLNKd2wx+NzTplTWBs/V1Cynu0t3J2wAwONcDt+8UZ8LCHFl+YwYneTySRanvFjg0/NDjsNDCvroO6bjRXGdpMwkqTLRjQAasZKyXyD1tAyJDPH6SoN/psLippVZtPeZpmlTn1OWPAtjHq8WkP18ga+wW3Eyuy7B6SG0lTOXBBeAq1QpB9/fIUt/T+Tja1bTeob5DOg1W30eJQVranJ9pUuuX1Ke6KM/ImP2wAG+6Ki0ag8JH3amU83Sr/Yvc/vUxyNgLqYNjKe0j93/M/pvL441UiGviLxOgSHU86XXpjaGm+X4APmNXRcIKVF7izSr8Dg7VhbafONk6cb/Ovi/nMJ0rG9w36narCsoe2smWiDJXJ3VQ+VQ/vUWFOLQL6tFxJyaa3UIJzCnEguQzdOaXC8bKsXCBwFfQR4oWRBAA3W7PLGfXhXqYffYSGnOA==

Steps to reproduce

1 - Create 2 Component or 2 Route.
2 - One is just tag, other one is just

What is expected?

When Route changes or Component changes or v-if toggles, old one must be destroyed and not drop detached nodes in memory.

What is actually happening?

When Route changes or Component changes or v-if toggles, drops detached node, not cleanable and increases continues. (When i take heap snapshot this detached dom nodes reduces)

System Info

No response

Any additional comments?

// A.vue

<script setup lang="ts"></script>

<template>
    <img src="https://brandonroberts.dev/assets/posts/astro-logo.jpg" />
</template>

<style scoped lang="scss"></style>

// B.vue

<script setup lang="ts"></script>

<template>
    <video muted autoplay src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
</template>

<style scoped lang="scss"></style>

// App.vue

<template>
    <KeepAlive>
        <component :is="component" />
    </KeepAlive>
</template>

<script setup lang="ts">
import { shallowRef } from "vue";

import A from "./A.vue";
import B from "./B.vue";

let route = 0;
const component = shallowRef(A_Page);

setInterval(() => {
    if (route === 0) {
        component.value = B;
        route = 1;
    } else {
        component.value = A;
        route = 0;
    }
}, 1000);
</script>

<style scoped lang="scss"></style>

[edison1105]

duplicate of #5256