如果我加载我的应用程序并立即拍摄 Chrome 内存堆快照，我会得到以下结果。

如果我单击我的 Web 应用程序，然后返回到加载的原始页面，并拍摄另一个内存堆快照，我会得到以下结果。

从这里，我们可以看到现在 VueComponent 的数量增加了约 10 倍，Vue 实例的数量也在增加。

这对应用程序的内存使用有很大影响。

有哪些工具/方法可用于追踪未销毁的罪魁祸首组件？

标签： javascriptvue.jsmemoryvuejs2

追踪孤立的 Vue 组件

正如问题所暗示的那样，我很确定这些内存问题是由未清理的孤立 Vue 组件引起的。可以查看循环引用等的源代码......并手动修复。

我一直在寻找一种方法来查找特定的 Vue 组件，这样我就可以缩小在代码中的搜索范围。

使用堆快照

我发现的最佳方法确实需要一些手动操作，但效果很好。

从 Chrome 开发工具 Heap snapshot 我们可以搜索 detached

注意你必须为开发而不是生产编译 Vue，否则这将不起作用

这将显示已从 DOM 分离的元素列表。

我们现在可以单击其中一项来突出显示它。

然后我们可以前往 Chrome 开发工具控制台并输入$0以获取元素。

从这里我可以看到来自我的登录页面的电子邮件输入是罪魁祸首，所以我应该调查为什么它没有被破坏。

虽然这确实提供了一种很好的方法来追踪未被破坏的组件，但请注意并非所有detached节点都是坏的，应用您的应用程序的上下文来确定它是否是内存泄漏。