查找未销毁的Vue组件

Question

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

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

由此可见，现在VueComponents的数量增加了约10倍，Vue实例的数量也增加了。

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

有什么工具/方法可用来追踪未被破坏的罪魁祸首？

Answer 1

跟踪孤立的Vue组件

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

我一直在寻找一种找到特定Vue组件的方法，以便缩小搜索范围。

使用堆快照

我发现最好的方法确实需要一些人工，但是效果很好。

从Chrome开发工具的堆快照中，我们可以搜索分离的

  

您必须为开发而不是生产编译Vue，否则将无法正常工作

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

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

然后，我们可以转到Chrome开发者工具控制台并输入$0来获取元素。

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

结论

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