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 with component with input with v-model

See original GitHub issue

Version

2.6.10

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">
      <div id="nav">
        <button @click="goHome">go to Home</button>
        <button @click="goAbout">go to About</button>
      </div>
      <component :is="current"></component>
    </div>

    <script>
      const Home = {
        name: 'Home',
        template: `
      <div>
        <h2>Home</h2>
      </div>
      `,
      }

      const About = {
        template: `
        <div class="about">
    <h1>This is an about page</h1>
    <input type="text" v-model="input">
  </div>
      `,
        name: 'about',
        data: () => ({
          input: '',
        }),
      }

      const vm = new Vue({
        el: '#app',
        data() {
          return {
            current: 'Home',
          }
        },

        methods: {
          goHome() {
            this.current = 'Home'
          },
          goAbout() {
            this.current = 'About'
          },
        },
        components: { Home, About },
      })
    </script>
  </body>
</html>

Screen Shot 2019-05-09 at 18 59 07

Steps to reproduce

go to the about page
type in the input
leave the page
collect garbage and take a snapshot with devtools

What is expected?

VueComponent count should be stable

What is actually happening?

VueComponent count keeps increasing.

seems to be related to typing in the input

Issue Analytics

State:
Created 4 years ago
Reactions:13
Comments:20 (3 by maintainers)

Top GitHub Comments

10reactions

zrh122commented, May 30, 2019

@posva, i just found out PR #10085 can fix it, my Chrome Version is 74.0.3729.169.

3reactions

bigghhzcommented, Mar 3, 2020

I also tried this solution, but only half of it worked. chrome80/vue2.6.11/vue-router 3.0. While vue component has been successfully recycled, three additional listeners have not been removed and dom cannot be recycled. Looking at the heap snapshot,the VueComponent increment is 0, but htmlInputElement has not been recycled, as Performance tools proves. I tracked that these 3 listeners comes from “vue/src/platforms/web/runtime/directs/model.js”–>function onCompositionStart and onCompositionEnd, But I’m not familiar with vue source code . when input element is deep in a large component, this leads to a large memory leak.

Top Results From Across the Web

Avoiding Memory Leaks - Vue.js

The following example shows a memory leak caused by using the Choices.js library in a Vue component and not properly cleaning it up....

Input event causing memory leak - Vue.js - Stack Overflow

Close the child by clicking "Toggle again. Then click anywhere on the page. See that the component is still in memory.

Memory leaks on example of Vue.js apps | Let's discuss IT

Your JS application is slowing down the more you use it? Chrome is devouring all the RAM again? Node.js app keeps crashing randomly?...

[Solved]-Undetectable memory leak in vuejs application-Vue.js

Coding example for the question Undetectable memory leak in vuejs application-Vue.js. ... How to Vue let input value v-model with v-bind:value operation ...

nuxt3 component keeping input value after derendering

... as we having a memory leak, even if I destroy this component and render ... im not using v-model, they are common...