Memory Leak - Detached Dom Element On Every Route

[michaelperel]

Version

4.1.2

Reproduction link

blogs.windows.com

Steps to reproduce

Use the demo app that gets installed when you run:

npm init vue@3

(say yes to installing the router)

Repeatedly click "Home" and "About" routes. In Chromium Edge devtools, select "Detached Elements"

Notice that every click results in a new detached element (the view that was being switched away from). When you click the garbage icon, and the refresh icon, note that these detached elements are never garbage collected.

What is expected?

Properly garbage collected html elements

What is actually happening?

Elements are being retained, not garbage collected. A memory leak occurs as a result.

This may be somewhat related to #730 . It was closed without resolution.

---

This causes problems for long running SPAs. For instance, I built a PWA and after a few days, it must be reloaded.

[posva]

Hello! I checked again using the reproduction from the previous issue and it didn't yield any memory leaks.

I also tried creating a new project with npm init vue, building for production and serving the dist folder. Same result: node count is stable.

(Edge 103)

As you can see only one about page is cached (probably for performance reasons by the browser or Vue) and the home page isn't (probably because it's only one node)

These are the components I tried (simplified after creating the project) so you can check it yourself:

App.vue

<template>
  <header>
    <div class="wrapper">
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <hr />

  <RouterView />
</template>

HomeView.vue

<template>
  <main>Home</main>
</template>

AboutView.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>

Keep in mind you could also have an extension creating memory leaks.

Also please don't open issues without a reproduction. Especially memory leak issues. Always provide fully boiled down reproductions that lead to memory leaks.