Open
Description
Version
3.4.3
Reproduction link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.min.js"></script>
<div id="app">
<router-link :to="{name: 'memory_leak'}">Go to Memory Leak</router-link>
<router-link to="/">home (using this link won't hold memory)</router-link>
<router-view></router-view>
</div>
<script>
const leak = {
template: `
<div style="word-break: break-all;">
<router-link to="/">Back</router-link>
<br>
<span v-for="span in spans" :key="span.id">{{ span.text }}</span>
</div>
`,
data() {
return {
spans: [],
}
},
created() {
for (let i = 1; i <= 10; i++) {
let obj = {
id: i,
text: Array(10).fill('a').join(''),
}
this.spans.push(obj)
}
},
}
const ParentMemoryLeak = {
template: `
<div>
<h1>Parent Memory leak</h1>
<br>
<router-view></router-view>
</div>
`,
name: 'ParentMemoryLeak',
}
const routes = [
{
path: '/parent-memory-leak',
component: ParentMemoryLeak,
children: [
{
path: 'memory-leak',
name: 'memory_leak',
component: leak,
},
],
},
{ path: '/', component: ParentMemoryLeak },
]
const router = new VueRouter({
routes,
})
new Vue({
el: '#app',
router,
})
</script>
</body>
</html>Steps to reproduce
- Follow this link for open project
- Open in new window with codesandbox
- Open performance monitor in Google Chrome (emphasize on quantity DOM nodes)
- Click on the link "Go to Memory Leak" (pay attention to how it has changed quantity DOM nodes)
- Click on the link "Back" (not the home link)
- Amount DOM nodes not changed.
P.S. If you do this procedure several times amount DOM nodes should changed, but the original will remain forever.
What is expected?
it is expected that after each click on the link "back" DOM nodes will be cleared.
What is actually happening?
Now, they are cleared only after the first transition, but still remain in the memory DOM nodes for the first transition.