-
-
Notifications
You must be signed in to change notification settings - Fork 33.7k
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
Comments
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> |
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
Version
2.5.9
Reproduction link
https://jsfiddle.net/pufjfwm8/2/
Steps to reproduce
(Chrome 60.0.3112.101)
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
The text was updated successfully, but these errors were encountered: