Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

memory leaks on a cached static render functions #7184

Closed
aanation opened this issue Dec 5, 2017 · 1 comment
Closed

memory leaks on a cached static render functions #7184

aanation opened this issue Dec 5, 2017 · 1 comment

Comments

@aanation
Copy link

aanation commented Dec 5, 2017

Version

2.5.9

Reproduction link

https://jsfiddle.net/pufjfwm8/2/

Steps to reproduce

(Chrome 60.0.3112.101)

  1. take the heap memory snapshot in chrome devtool
  2. click on "to big" link (go to the route with a lot components)
  3. click on "to small" link (return back to the small component)
  4. collect garbage in devtool
  5. take the second snapshot
  6. compate snapshots
  7. heap increase and vue cache div element ("I am big component!"). This element have the prop "context",
    that reference to "zombie" component. All zombie-components alive, but route have changed.

if you will repeat this actions, memory will leak.
If you remove "I am big component!"-div, memory does'nt leak.

What is expected?

cached nodes should not contain references to destroyed components

What is actually happening?

We have memory leak (1-2 GB) with large lists of components like this.


Memory leaks:
https://imgur.com/fnaC1vS

Memory does'nt leak:
https://imgur.com/WPiCZ0A

@posva posva added the bug label Dec 5, 2017
@posva
Copy link
Member

posva commented Dec 5, 2017

Just as a note it happens without vue-router as well

<!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>
  <div id="app">
    <h1>Memory Leaks :( </h1>
    <button @click="currentComp = currentComp === 'CA' ? 'CB' : 'CA'">Toggle</button>

    <component :is="currentComp"></component>
  </div>

  <script src="https://unpkg.com/vue"></script>

  <script>
    let zombie = {
      template: `
		<div>
			{{ text }}
		</div>
	`,
      props: {
        text: String
      }
    };

    let smallComponent = {
      name: 'smallComponent',
      template: `
  <div>
  	<div>I am small component!</div>
  </div>`
    };

    let bigComponent = {
      name: 'bigComponent',
      components: {
        zombie
      },
      template: `
  	<div>
    	<div>
      	<div>I am big component!</div>
      </div>
      <zombie v-for="elem in bigArray" 
      				:key="elem.id"
              :text="elem.data">
      </zombie>
    </div>
  `,
      data() {
        return {
          bigArray: []
        }
      },
      created() {
        for (let i = 0; i < 1000; i++) {
          this.bigArray.push({
            id: `elem${i}`,
            data: `i am element №${i}`
          });
        }
      }
    };

    Vue.component('CA', smallComponent)
    Vue.component('CB', bigComponent)

    const app = new Vue({
      data: {
        currentComp: 'CA',
      }
    }).$mount('#app');
  </script>
</body>

</html>

@yyx990803 yyx990803 removed the bug label Dec 5, 2017
lovelope pushed a commit to lovelope/vue that referenced this issue Feb 1, 2018
f2009 pushed a commit to f2009/vue that referenced this issue Jan 25, 2019
aJean pushed a commit to aJean/vue that referenced this issue Aug 19, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants