memory leak with keep-alive #6759

okjesse · 2017-10-09T07:35:43Z

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!

posva · 2017-10-09T09:43:30Z

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/

HerringtonDarkholme · 2017-10-09T12:39:40Z

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.

posva · 2017-10-09T12:48:48Z

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 😄

okjesse · 2017-10-09T13:49:25Z

https://jsfiddle.net/a5qb0m8u/1/ The code seems still has this problem after test.

okjesse · 2017-10-10T01:09:50Z

Thank you very much, It's works!

fix vuejs#6759

denonzhu · 2019-03-02T01:37:12Z

这个问题好像还没有有效的解决，在动态incloud的时候，已经缓存的组件被删除后，在实际内存中还是没有被清除，chrome 内存快照依然能看到detach的vnode。最新版本2.6.7

love1390700626 · 2019-04-18T03:17:51Z

这个问题好像还没有有效的解决，在动态incloud的时候，已经缓存的组件被删除后，在实际内存中还是没有被清除，chrome 内存快照依然能看到detach的vnode。最新版本2.6.7

我也遇到了，有什么办法可以解决吗。

hunson1990 · 2019-06-30T02:34:05Z

这个问题好像还没有有效的解决，在动态incloud的时候，已经缓存的组件被删除后，在实际内存中还是没有被清除，chrome 内存快照依然能看到detach的vnode。最新版本2.6.7

同遇到，请问有什么解决方案么

381510688 · 2019-09-02T10:52:32Z

这个问题好像还没有有效的解决，在动态incloud的时候，已经缓存的组件被删除后，在实际内存中还是没有被清除，chrome 内存快照依然能看到detach的vnode。最新版本2.6.7

同遇到，请问有什么解决方案么

caosy8023 · 2019-11-15T09:30:57Z

我也遇到了，求解决方法

yjq8023 · 2019-12-23T09:34:34Z

楼上大佬们有解决办法了么？

amormason · 2019-12-24T09:47:32Z

@yjq8023 大佬有处理办法了吗?

yjq8023 · 2019-12-24T09:48:39Z

没呢，正头疼

…

------------------ 原始邮件 ------------------ 发件人: "乔均"<notifications@github.com>; 发送时间: 2019年12月24日(星期二) 下午5:47 收件人: "vuejs/vue"<vue@noreply.github.com>; 抄送: "杨叔"<1005473728@qq.com>;"Mention"<mention@noreply.github.com>; 主题: 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.

amormason · 2019-12-24T09:51:02Z

@yjq8023 网上有办法修改 node_modules\vue\src\core\components\keep-alive.js 这个源码的代码的解决办法问题是我怎么修改这个文件都无效甚至把这个文件清空了程序还是一样的运行如果有办法修改这个文件估计可以试试

yjq8023 · 2019-12-24T09:52:18Z

有地址吗，分享一下

…

------------------ 原始邮件 ------------------ 发件人: "乔均"<notifications@github.com>; 发送时间: 2019年12月24日(星期二) 下午5:51 收件人: "vuejs/vue"<vue@noreply.github.com>; 抄送: "杨叔"<1005473728@qq.com>; "Mention"<mention@noreply.github.com>; 主题: Re: [vuejs/vue] memory leak with keep-alive (#6759) @yjq8023 网上有办法修改 node_modules\vue\src\core\components\keep-alive.js 这个源码的代码的解决办法问题是我怎么修改这个文件都无效甚至把这个文件清空了程序还是一样的运行如果有办法修改这个文件估计可以试试 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

yjq8023 · 2019-12-24T11:41:58Z

把keep-alive.js文件拷出来，建个全局的组件替换调vue内置的keepalive可以生效，就是不知道内存泄露具体怎么改

…

------------------ 原始邮件 ------------------ 发件人: "乔均"<notifications@github.com>; 发送时间: 2019年12月24日(星期二) 下午5:51 收件人: "vuejs/vue"<vue@noreply.github.com>; 抄送: "杨叔"<1005473728@qq.com>;"Mention"<mention@noreply.github.com>; 主题: Re: [vuejs/vue] memory leak with keep-alive (#6759) @yjq8023 网上有办法修改 node_modules\vue\src\core\components\keep-alive.js 这个源码的代码的解决办法问题是我怎么修改这个文件都无效甚至把这个文件清空了程序还是一样的运行如果有办法修改这个文件估计可以试试 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

yjq8023 · 2019-12-25T03:03:11Z

修改keepAlive组件行不通，问题不在这个组件内。组件内设置了 vnode.data.keepAlive = true;。这个属性在其他地方用到，内存泄露也是在其他地方引起的

…

------------------ 原始邮件 ------------------ 发件人: "乔均"<notifications@github.com>; 发送时间: 2019年12月24日(星期二) 下午5:51 收件人: "vuejs/vue"<vue@noreply.github.com>; 抄送: "杨叔"<1005473728@qq.com>;"Mention"<mention@noreply.github.com>; 主题: Re: [vuejs/vue] memory leak with keep-alive (#6759) @yjq8023 网上有办法修改 node_modules\vue\src\core\components\keep-alive.js 这个源码的代码的解决办法问题是我怎么修改这个文件都无效甚至把这个文件清空了程序还是一样的运行如果有办法修改这个文件估计可以试试 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

namehou · 2020-04-07T09:37:24Z

我也遇到了这个问题急需解决方法？标签页面关闭，内存不销毁

jiaozhiye · 2020-04-26T12:30:59Z

我也遇到了这个问题急需解决方法？标签页面关闭，内存不销毁

liwenda122 · 2020-09-08T01:18:37Z

same probelm

alwxkxk · 2021-11-18T03:51:07Z

经测试，2.6.10仍存在内存泄漏问题，但2.6.14已经没有了。
应该是#10085已修复并合并了。

JinPengGeng · 2021-12-09T02:36:02Z

10085 只是合并到 dev 分支，并没有 release 在 2.6.14 的版本中
看官方计划是在 2.6.15 的release中，状态已经完成，但还有不少其他的 Planned 没有结束
我也在等待中。。。
https://github.com/vuejs/vue/projects/11#column-14560638

hanzhangyu · 2021-12-09T02:36:24Z

我已收到你的邮件

posva added the bug label Oct 9, 2017

yyx990803 closed this as completed in 405d8e9 Oct 9, 2017

maxneuvians mentioned this issue Oct 30, 2017

F7 Webpack - VueComponents never garbage collected framework7io/framework7-vue#263

Closed

ztlevi pushed a commit to ztlevi/vue that referenced this issue Feb 14, 2018

fix: prevent memory leak due to circular reference in vnodes

e3c6a5f

fix vuejs#6759

f2009 pushed a commit to f2009/vue that referenced this issue Jan 25, 2019

fix: prevent memory leak due to circular reference in vnodes

e84d7b6

fix vuejs#6759

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

memory leak with keep-alive #6759

memory leak with keep-alive #6759

okjesse commented Oct 9, 2017

posva commented Oct 9, 2017 •

edited by HerringtonDarkholme

HerringtonDarkholme commented Oct 9, 2017 •

edited

posva commented Oct 9, 2017

okjesse commented Oct 9, 2017

okjesse commented Oct 10, 2017

denonzhu commented Mar 2, 2019

love1390700626 commented Apr 18, 2019

hunson1990 commented Jun 30, 2019

381510688 commented Sep 2, 2019

caosy8023 commented Nov 15, 2019

yjq8023 commented Dec 23, 2019

amormason commented Dec 24, 2019

yjq8023 commented Dec 24, 2019 via email

amormason commented Dec 24, 2019

yjq8023 commented Dec 24, 2019 via email

yjq8023 commented Dec 24, 2019 via email

yjq8023 commented Dec 25, 2019 via email

namehou commented Apr 7, 2020

jiaozhiye commented Apr 26, 2020

liwenda122 commented Sep 8, 2020

alwxkxk commented Nov 18, 2021

JinPengGeng commented Dec 9, 2021

hanzhangyu commented Dec 9, 2021 via email

memory leak with keep-alive #6759

memory leak with keep-alive #6759

Comments

okjesse commented Oct 9, 2017

Version

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

posva commented Oct 9, 2017 • edited by HerringtonDarkholme

HerringtonDarkholme commented Oct 9, 2017 • edited

posva commented Oct 9, 2017

okjesse commented Oct 9, 2017

okjesse commented Oct 10, 2017

denonzhu commented Mar 2, 2019

love1390700626 commented Apr 18, 2019

hunson1990 commented Jun 30, 2019

381510688 commented Sep 2, 2019

caosy8023 commented Nov 15, 2019

yjq8023 commented Dec 23, 2019

amormason commented Dec 24, 2019

yjq8023 commented Dec 24, 2019 via email

amormason commented Dec 24, 2019

yjq8023 commented Dec 24, 2019 via email

yjq8023 commented Dec 24, 2019 via email

yjq8023 commented Dec 25, 2019 via email

namehou commented Apr 7, 2020

jiaozhiye commented Apr 26, 2020

liwenda122 commented Sep 8, 2020

alwxkxk commented Nov 18, 2021

JinPengGeng commented Dec 9, 2021

hanzhangyu commented Dec 9, 2021 via email

posva commented Oct 9, 2017 •

edited by HerringtonDarkholme

HerringtonDarkholme commented Oct 9, 2017 •

edited