【问题标题】：Find Vue Components Not Being Destroyed查找未销毁的 Vue 组件
【发布时间】：2019-08-25 04:00:00
【问题描述】：

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

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

由此，我们可以看到现在 VueComponent 的数量增加了约 10 倍，并且 Vue 实例的数量也在增加。

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

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

【问题讨论】：

你是如何在 Chrome 的内存堆快照中过滤 VueComponent 的？无论如何，有趣的问题
@Toodoo 取决于您的设置，当您为生产编译代码时，您的类名可能会被更改/混淆，这就是为什么您找不到任何“Vue”的原因。尝试为开发环境编译它。
@Josh 我首先认为历史模式可能会使用更多内存，但事实证明并非如此。这个问题听起来不简单。有一些相关的 Github 问题和 StackOverflow 问题，但都没有确凿的答案。请参阅github.com/vuejs/vue-router/issues/2384、github.com/vuejs/vue-router/issues/2389、stackoverflow.com/questions/51400373/… 和 stackoverflow.com/questions/49424507/…。也许您可以将您的示例添加到 github 问题之一。
vue devtools 的最新版本有一个性能部分可能会有所帮助（我还没有尝试过）。我也用过这个工具：github.com/vue-perf-devtool/vue-perf-devtool
@Josh 如果您使用的是transition 和keep-alive，则最近报道了一个已知的memory leak issue。

【解决方案1】：

追踪孤立的 Vue 组件

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

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

使用堆快照

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

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

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

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

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

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

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

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

【讨论】：