Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Memory leak when using "transition" and "keep-alive"

See original GitHub issue

Version

2.6.10

Reproduction link

https://codepen.io/aaronbird/pen/JVRKwa

Steps to reproduce

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>
    <style>
      .link {
        cursor: pointer;
        user-select: none;
      }
    </style>
  </head>
  <body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <div id="app">
      <transition>
        <keep-alive include="foo">
          <component :is="target" @change="onChange"></component>
        </keep-alive>
      </transition>
    </div>
    <script>
      const Foo = {
        name: "foo",
        template: `<div class="link" @click="$emit('change', 'bar')">Go to Bar</div>`
      };
      const Bar = {
        name: "bar",
        template: `<div class="link" @click="$emit('change', 'foo')">Go to Foo</div>`
      };
      Vue.component("foo", Foo);
      Vue.component("bar", Bar);
      const app = new Vue({
        data: {
          target: "foo"
        },
        methods: {
          onChange(target) {
            this.target = target;
          }
        }
      }).$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)