profile
viewpoint

Ask questionsMemory leak when using "transition" and "keep-alive"

Why are some "Vue Component" not cleared when using "transition" and "keep-alive"?

I wrote a demo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>demo</title>
  </head>
  <body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <div id="app">
      <transition>
        <keep-alive include="foo">
          <router-view></router-view>
        </keep-alive>
      </transition>
    </div>
    <script>
      const Foo = {
        name: "foo",
        template: `<div><router-link to="/bar">Go to Bar</router-link></div>`
      };
      const Bar = {
        name: "bar",
        template: `<div><router-link to="/foo">Go to Foo</router-link></div>`
      };
      const routes = [
        { path: "/foo", component: Foo, alias: "/" },
        { path: "/bar", component: Bar }
      ];
      const router = new VueRouter({
        routes
      });
      const app = new Vue({
        router
      }).$mount("#app");
    </script>
  </body>
</html>

The debugging process is as follows:
1 Click "Collect garbage" and "take heap snapshot"(snapshot 1)
2 Click the routing button on the left 10 times, then click "Collect garbage" and "take heap snapshot"(snapshot 2)
3 Click the routing button on the left 10 times, then click "Collect garbage" and "take heap snapshot"(snapshot 3)

The generated "snapshot" is as follows:

snapshot 1:
snapshot 2:
snapshot 3:

VueComponent is not being recycled, is this a bug?

vuejs/vue

Answer questions Aaron-Bird

@posva Could you delete this issue?

useful!

Related questions

[Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded" while navigating to another route hot 1
关于keep-alive缓存页面问题请教 hot 1
Can not clear slot content with vue@2.5.3 hot 1
TypeError: Cannot read property 'toLowerCase' of undefined at emptyNodeAt hot 1
VNode.componentInstance is undefined when rendered by a functional component hot 1
Korean input trigger keydown event twice hot 1
Proposal: Template inheritance using the slots mechanism hot 1
Error in v-on handler: "RangeError: Maximum call stack size exceeded" hot 1
如何通过v-bind:style动态生成背景图? hot 1
如何通过v-bind:style动态生成背景图? hot 1
IE11, console print: [Vue warn]: Error in nextTick: "Error: Invalid argument." But work well with chrome hot 1
v-bind:style 'background-image' error: url is not a function hot 1
force re-computation of a computed property hot 1
v-model on mobile not updating until a space is pressed hot 1
There is no a attribute like react's $$typeof to prevent XSS injection in the vnode of Vue. hot 1
Github User Rank List