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.

VueComponent instances retained after calling vm.$destroy

See original GitHub issue

Version

2.6.10

Minimal reproduction

<!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>Document</title>
  </head>
  <body>
    <script src="https://unpkg.com/vue"></script>

    <div id="app">
      <base-link>Link</base-link>
    </div>

    <button id="action">Load</button>

    <script>
      let vm
      const button = document.getElementById('action')
      button.addEventListener('click', () => {
        if (vm) {
          vm.$destroy()
          vm = null
          button.textContent = 'Load'
        } else {
          vm = new Vue({
            el: '#app',
            components: {
              BaseLink: {
                template: `<a href="#" @click="onClick"><slot /></a>`,
                methods: {
                  onClick(evt) {
                    evt.preventDefault()
                    console.log('clicked')
                  },
                },
              },
            },
          })
          button.textContent = 'Destroy'
        }
      })
    </script>
  </body>
</html>

Steps to reproduce

Load the app by clicking the button and take a heap snapshot
Load/unload the app multiple times by clicking the button
End in loaded stat and take a heap snapshot
Search Vue in the memory snapshot viewer

I’ve personally tested this in Chrome.

What is expected?

Vue retained size should not increase

Screen Shot 2019-09-06 at 09 42 58

What is actually happening?

Vue retained size increases

Background: I’m using Vue and Turbolinks together in a project where the backend serves HTML with Vue templates inlined. This means I have to create and destroy Vue instances when navigating between pages.