如果我加载应用程序并立即拍摄Chrome内存堆快照，我会得到以下结果.
如果我点击我的web应用，然后返回到加载的原始页面，并拍摄另一个内存堆快照，我会得到以下结果.
从中我们可以看出，现在VueComponent的数量增加了约10倍，Vue实例的数量也增加了.
这对应用程序的内存使用有很大影响.
有哪些工具/方法可用于追踪未被销毁的故障部件？
推荐答案
Tracking Down Orphaned Vue Components
正如问题所暗示的，我非常确定这些内存问题是由未被清理的孤立Vue组件引起的.可以在源代码中查找循环引用等...并手动修复.
我在寻找一种方法来找到特定的Vue组件，以便缩小代码搜索范围.
Using Heap Snapshot
我找到的最好的方法确实需要一些手动操作，但效果很好.
从Chrome开发工具堆快照中，我们可以搜索
注意:您必须为开发人员而不是生产人员编译Vue，否则将无法工作
这将显示已从DOM分离的元素列表.
我们现在可以点击其中一个项目来突出显示它.
然后我们可以转到Chrome开发工具控制台，输入$0来获取元素.
从这一点我可以看出，我的登录页面的邮箱输入是罪魁祸首，所以我应该调查为什么没有被销毁.
Conclusion
虽然这确实提供了一种追踪未被销毁组件的好方法，但请注意，并非所有detached个 node 都是坏 node ，请应用应用程序的上下文来确定是否存在内存泄漏.
Vue.js相关问答推荐
使用项目和字段，列跨度为 2 的 Bootstrap-vue 表
VueJS 中的 VisJS 时间轴：带有图像的项目放错了位置
vue ： 多个样式的类绑定在一个
使用 vue / nuxt js 切换 fontawesome 图标
vuex 未知动作类型：addTodo
在组件之间共享 websocket 连接
无需直接 DOM 操作即可绘制d3-axis
Nuxt.js 中的开发工具样式编辑问题
Eslint Vue 3 解析错误：'>' expected.eslint
如何在Typescript语言Vuejs中使用watch功能？
动态插入字符串上的 Vue 事件处理程序不起作用
在组件的样式部分使用 Vue 变量
Vue.js 从模板中分离样式
Vue 如何使用 slot 和 slot-props 测试组件
Vuex - 何时从 http 服务器加载/初始化存储数据
带有后退按钮的 Vue.js 路由
Vue.js 单向绑定表单
v-if 未在计算(computed)属性上触发
使用 Vee-validate 禁用按钮，直到正确填写表单
vuejs 复制数据对象和删除属性也会从原始对象中删除属性
实用课程推荐