本例子可以复现keepalive内存泄露问题
- npm install 进行安装
- npm run serve 运行
- 打开浏览器 the http://localhost:8080/sub/
- 点击新增按钮创建组件a1
- 点击新增按钮创建组件a2
- 点击新增按钮创建组件a3
- 点击新增按钮创建组件a3 , 当前内存使用大概 330mb
- 点击组件a4的x删除组件 ,但是内存依然是 330mb
- 查看内存使用并没有减少, 这时候内存泄露了
点击组件a4的x删除组件 ,内存应该减去80mb,剩下250mb
内存使用依然是330mb.
当前点击每个新增按钮,内存都会增加80mb,重复点击4次,内存大概是330mb 当点击组件a4的关闭时候,内存应该减去80mb,剩下250mb,但是实际还是330mb. 你可以查看gif 动图来重新问题。
通过谷歌浏览器的内存报告分析,我们可以看到, 组件a3的a3-component.componentInstance.$vnode.parent.componentOptions.children[0] 居然是 组件a4,由于有这个引用,导致a4不能释放。
通过修改代码 vue2.7.12 -> keepalive.js -> render() 地址: src\core\components\keep-alive.ts 代码行数: line 127 加入下面修复的代码.
//mounted,repair the keepalive memory bug code
for (const key in this.cache) {
const entry = this.cache[key]
if (entry && vnode && entry.tag && entry.tag !== vnode.tag ) {
entry.componentInstance.$vnode.parent.componentOptions.children = []
entry.componentInstance.$vnode.parent.elm = null
}
}
通过上面代码,每次执行keepalive的渲染方法,都会重新初始化组件间的错误引用。 详细请访问掘金 https://juejin.cn/post/7153186266300252168
实际代码整合到 public的cdn文件夹中,可以通过切换不同cdn对比效果
<!-- 原有vue2.16.14版本 -->
<script src="/cdn/vue-2.6.14/dist/vue.js"></script>
<!-- 调整源码后的 版本,修复引用问题,支持sourcemap调试 -->
<script src="/cdn/vue-2.6.14/dist_fixed_bug/vue.js"></script>