Version
2.4.4
Reproduction link
https://jsfiddle.net/okjesse/k94fphsg/
Steps to reproduce
Switch Foo and home link for several times，VueComponent's count will be always grow up
What is expected?
VueComponent's count is stable
What is actually happening?
VueComponent's count always grow up
- switch 0 time:
- switch 20 times:
- switch 100 times
when the component is big, chrome's memory will be not enough!
thank you for your reading!
okjesse
All 20 comments
Tested with latest vue build and seems to still be the case when using include. I removed Vue Router as well. For memory leaks, it's better to provide html pages as the heapshot is way way faster to take:
<!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://npmcdn.com/vue/dist/vue.js"></script>
<div id="app">
<button @click="comp = 'Home'">/home</button>
<button @click="comp = 'Foo'">/foo</button>
<keep-alive include="Foo">
<component :is="comp" />
</keep-alive>
</div>
<script>
const Home = {
name: 'Home',
template: '<div>{{text}}</div>',
data: function() {
return {
text: 'home'
}
},
}
const Foo = {
name: 'Foo',
template: '<div>{{text}}</div>',
data: function() {
return {
text: 'Foo'
}
},
}
new Vue({
el: '#app',
data: {
msg: 'Hello World',
comp: 'Home'
},
components: {
Home,
Foo
}
})
</script>
</body>
</html>
Removing the include prop stops the object count increment but keeps the increment of the _retained size_ of the keep-alive component which I'm not sure is intended
Edit by @HerringtonDarkholme: add repro link https://jsfiddle.net/a5qb0m8u/1/
posva
on 9 Oct 2017
My preliminary investigation tells me there is a discrepancy between the cached VNode and its parent.
The children in parent's componentOption contains stale child, in this case Home. Thus the entire list of component instances isn't collected.
HerringtonDarkholme
on 9 Oct 2017
I haven't investigated further, just tried to guess from reading keep-alive component but it could also come from some other place. I'm interested in the fix though, memory leaks are interesting in js 😄
posva
on 9 Oct 2017
https://jsfiddle.net/a5qb0m8u/1/ The code seems still has this problem after test.
okjesse
on 9 Oct 2017
Thank you very much, It's works!
okjesse
on 10 Oct 2017
这个问题好像还没有有效的解决，在动态incloud的时候 ，已经缓存的组件被删除后，在实际内存中还是没有被清除，chrome 内存快照依然能看到detach的vnode。最新版本2.6.7
denonzhu
on 2 Mar 2019
这个问题好像还没有有效的解决，在动态incloud的时候 ，已经缓存的组件被删除后，在实际内存中还是没有被清除，chrome 内存快照依然能看到detach的vnode。最新版本2.6.7
我也遇到了，有什么办法可以解决吗。
love1390700626
on 18 Apr 2019
这个问题好像还没有有效的解决，在动态incloud的时候 ，已经缓存的组件被删除后，在实际内存中还是没有被清除，chrome 内存快照依然能看到detach的vnode。最新版本2.6.7
同遇到，请问有什么解决方案么
hunson1990
on 30 Jun 2019
这个问题好像还没有有效的解决，在动态incloud的时候 ，已经缓存的组件被删除后，在实际内存中还是没有被清除，chrome 内存快照依然能看到detach的vnode。最新版本2.6.7
同遇到，请问有什么解决方案么
381510688
on 2 Sep 2019
我也遇到了，求解决方法
caosy8023
on 15 Nov 2019
楼上大佬们有解决办法了么？
yjq8023
on 23 Dec 2019
@yjq8023 大佬有处理办法了吗?
zhuanjiaozm
on 24 Dec 2019
没呢，正头疼
------------------ 原始邮件 ------------------
发件人: "乔均"<[email protected]>;
发送时间: 2019年12月24日(星期二) 下午5:47
收件人: "vuejs/vue"<[email protected]>;
抄送: "杨叔"<[email protected]>;"Mention"<[email protected]>;
主题: Re: [vuejs/vue] memory leak with keep-alive (#6759)
@yjq8023 大佬有处理办法了吗?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.
yjq8023
on 24 Dec 2019
@yjq8023 网上有办法修改 node_modules\vue\src\core\componentskeep-alive.js 这个源码的代码的解决办法 问题是我怎么修改这个文件都无效 甚至把这个文件清空了 程序还是一样的运行 如果有办法修改这个文件 估计可以试试
zhuanjiaozm
on 24 Dec 2019
有地址吗，分享一下
------------------ 原始邮件 ------------------
发件人: "乔均"<[email protected]>;
发送时间: 2019年12月24日(星期二) 下午5:51
收件人: "vuejs/vue"<[email protected]>;
抄送: "杨叔"<[email protected]>; "Mention"<[email protected]>;
主题: Re: [vuejs/vue] memory leak with keep-alive (#6759)
@yjq8023 网上有办法修改 node_modules\vue\src\core\componentskeep-alive.js 这个源码的代码的解决办法 问题是我怎么修改这个文件都无效 甚至把这个文件清空了 程序还是一样的运行 如果有办法修改这个文件 估计可以试试
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.
yjq8023
on 24 Dec 2019
把keep-alive.js文件拷出来，建个全局的组件替换调vue内置的keepalive可以生效，就是不知道内存泄露具体怎么改
------------------ 原始邮件 ------------------
发件人: "乔均"<[email protected]>;
发送时间: 2019年12月24日(星期二) 下午5:51
收件人: "vuejs/vue"<[email protected]>;
抄送: "杨叔"<[email protected]>;"Mention"<[email protected]>;
主题: Re: [vuejs/vue] memory leak with keep-alive (#6759)
@yjq8023 网上有办法修改 node_modules\vue\src\core\componentskeep-alive.js 这个源码的代码的解决办法 问题是我怎么修改这个文件都无效 甚至把这个文件清空了 程序还是一样的运行 如果有办法修改这个文件 估计可以试试
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.
yjq8023
on 24 Dec 2019
修改keepAlive组件行不通，问题不在这个组件内。组件内设置了 vnode.data.keepAlive = true;。这个属性在其他地方用到，内存泄露也是在其他地方引起的
------------------ 原始邮件 ------------------
发件人: "乔均"<[email protected]>;
发送时间: 2019年12月24日(星期二) 下午5:51
收件人: "vuejs/vue"<[email protected]>;
抄送: "杨叔"<[email protected]>;"Mention"<[email protected]>;
主题: Re: [vuejs/vue] memory leak with keep-alive (#6759)
@yjq8023 网上有办法修改 node_modules\vue\src\core\componentskeep-alive.js 这个源码的代码的解决办法 问题是我怎么修改这个文件都无效 甚至把这个文件清空了 程序还是一样的运行 如果有办法修改这个文件 估计可以试试
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.
yjq8023
on 25 Dec 2019
我也遇到了这个问题 急需解决方法？ 标签页面关闭，内存不销毁
namehou
on 7 Apr 2020
我也遇到了这个问题 急需解决方法？ 标签页面关闭，内存不销毁
jiaozhiye
on 26 Apr 2020
same probelm
liwenda122
on 8 Sep 2020
Related issues
paulpflug
·
3Comments
hiendv
·
3Comments
bfis
·
3Comments
franciscolourenco
·
3Comments
fergaldoyle
·
3Comments
Most helpful comment
这个问题好像还没有有效的解决，在动态incloud的时候 ，已经缓存的组件被删除后，在实际内存中还是没有被清除，chrome 内存快照依然能看到detach的vnode。最新版本2.6.7