【译】Vue 内存泄漏的识别和解决方案

大家好，这里是大家的林语冰。今天分享的是 Vue 官方周报（2023 年第 40 周）安利的一篇技术博客。

免责声明

本文属于是语冰的直男翻译了属于是，仅供粉丝参考，英文原味版请临幸 Vue.js Memory Leak Identification And Solution。

地球人都知道，Vue 是人气爆棚且地表最强的 JS（JavaScript）框架，祂允许我们构建动态交互式的 Web App。虽然但是，和任何软件雷同，Vue App 偶尔会遭遇内存泄漏，导致性能暴跌和意外行为。今天，我们将深入 Vue App 内存泄漏的原因，并探讨识别和修复这些问题的锦囊妙计。

内存泄漏是什么鬼物？

当程序无意中保留不再需要的内存时，这会阻碍内存释放并导致 App 的内存占用与日俱增，称为内存泄漏（memory leak）。在 Vue App 中，内存泄漏通常是由于组件、全局事件总线、事件监听器和引用的管理不当而引起的。

让我们通过若干示例来演示 Vue App 中的内存泄漏以及如何修复祂们。

虽然全局事件总线对组件间通信很有用，但如果管理不当，祂们也可能导致内存泄漏。当组件销毁时，应该将祂们从事件总线中删除，防止引用苟且偷生。

举个栗子：

在此示例中，发生内存泄漏是因为 ComponentB 从全局事件总线订阅了一个事件，但当祂销毁时并未退订。为了解决此问题，我们需要在 ComponentB 的 beforeDestroy 钩子中使用 EventBus.$off 移除事件监听器。所以 ComponentB 将如下所示：

Vue App 内存泄漏最常见的原因之一是未能正确移除事件监听器。当组件在其生命周期中附加事件监听器但无法删除祂们时。当组件销毁时，监听器会继续引用该组件，防止其被垃圾回收。

举个栗子：

这里，发生内存泄漏是因为单击"Start Memory Leak"按钮时创建了事件监听器（定时器），但组件销毁时没有正确移除祂。为了解决此问题，我们需要在 beforeDestroy 生命周期钩子中清除定时器。所以最终的代码将如下所示：

这是内存泄漏最常见的原因。这是由于组件清理不当造成的。这里我使用 Choices.js 库进行演示。

上述示例中，我们加载了一个包含一大坨选项的选择框，然后使用带有 v-if 指令的显示/隐藏按钮来添加祂并将其从虚拟 DOM 中删除。此示例的问题在于 v-if 指令从 DOM 中删除了父元素，但我们没有清理 Choices.js 创建的额外 DOM 片段，从而导致内存泄漏。

要观察该组件的内存占用，请在 Chrome 浏览器上打开该项目，然后导航到 Chrome 任务管理器，如果您单击"显示/隐藏"按钮，那么每次单击时，当前标签页的内存占用都会增加，即使您停止单击，祂也会增加不释放占用的内存。

以下是用于演示目的的 Chrome 任务管理器内存占用的快照：

单击"显示/隐藏"按钮之前:

单击两个标签页的"显示/隐藏"50-60 次后：

识别 Vue App 的内存泄漏可能富有挑战性，因为祂们通常表现为慢如龟速的性能或与日俱增的内存消耗。没有神奇的工具可以识别代码的 bug。

虽然但是，大多数现代浏览器都有提供内存分析工具，这允许您拍摄 App 内存占用时间轴的快照。这些工具可以帮助您识别哪些对象消耗了过多的内存以及哪些组件没有妥当的垃圾回收。

Chrome 的"堆快照"等工具可以通过可视化对象引用及其内存消耗来提供对内存占用的详情。这可以帮助您更精准地洞悉内存泄漏的根源。

识别和解决 Vue App 的内存泄漏和性能测试可能有点头大，而且在快速交付的兴奋中也很容易被无视。虽然但是，保持较小的内存占用对于整体的 UX（用户体验）仍然很重要。

借助合适的工具、技术和实践，您可以有效降低邂逅祂们的机率。

通过妥善管理事件监听器、循环引用、全局事件总线和响应式数据，您可以确保 Vue App 理想运行并保持健康的内存占用。

粉丝福利

为什么电脑要去保修？

因为祂积压了一大坨悬而未决的内存问题！

您现在收看的是直男翻译系列，学废了的小伙伴可以点赞友情赞助本系列，我们每天佛系投稿，欢迎关注和订阅最新动态。谢谢大家的彼芯，掰掰~

和其他 app 一样，Vue app 偶尔难免遭遇内存泄漏，导致性能低下和意外事故。这位大佬科普了 Vue 内存泄漏的若干原因 ------ 通常是由于组件、全局事件总线、事件监听器和引用的管理不当而引起的。大佬还科普了如何诉诸正确的工具和实践调试、修复以及规避内存泄漏。