前端vue项目内存泄漏排查

在Vue项目中排查内存泄漏是一项重要但可能有些复杂的任务。内存泄漏通常发生在不再需要的对象或数据继续占用内存空间时。以下是一些步骤和技巧，可以帮助你在Vue项目中排查和解决内存泄漏问题：

1. 使用开发者工具
Chrome DevTools
Chrome DevTools 是排查前端内存问题的强大工具。你可以使用“Memory”标签页来执行内存快照和堆分析。

录制堆快照（Heap Snapshot）:
打开 Chrome DevTools。
转到“Memory”标签页。
点击“Take snapshot”按钮来录制当前堆的快照。
执行一些操作（如切换路由、添加或删除组件）后再次录制快照。
比较两个快照，查看哪些对象或数据在第二个快照中仍然存在但不再需要。
使用性能分析器（Performance）:
在“Performance”标签页中，开始录制页面活动。
执行可能导致内存泄漏的操作。
停止录制并查看内存使用情况。
2. 检查Vue组件的销毁
确保Vue组件在不再需要时正确销毁。检查beforeDestroy或destroyed生命周期钩子是否被正确使用来清理资源，如定时器、事件监听器和DOM元素引用。

3. 监听全局Vue实例
如果你在全局Vue实例上添加了过多的监听器或数据，这些可能会在组件销毁后仍然保留在内存中。确保在组件销毁时移除这些监听器和数据。

4. 第三方库和插件
检查你使用的第三方库和Vue插件是否可能导致内存泄漏。一些库可能不正确地管理资源或在不再需要时不清除事件监听器。

5. 无限循环和递归
确保你的应用中没有无限循环或递归调用，这些可以迅速耗尽内存。

6. 监听器管理
如果你在Vue组件中使用了watch来监听数据变化，确保这些监听器在组件销毁时被正确移除或停止。

7. 使用WeakMap和WeakSet
当你需要在Vue应用中存储对对象的弱引用时，考虑使用WeakMap和WeakSet。这些集合允许对象在没有其他引用时自动被垃圾回收器回收。

8. 代码审查和测试
定期进行代码审查和单元测试，以识别潜在的内存泄漏问题。确保测试覆盖了应用的各个方面，特别是那些涉及大量数据或复杂交互的部分。

9. 使用内存泄漏检测工具
除了Chrome DevTools，还有一些专门的内存泄漏检测工具，如LeakCanary（主要用于Android）和Node.js的--inspect标志，尽管后者主要用于Node.js后端。对于前端Vue应用，Chrome DevTools通常是首选工具。

通过遵循上述步骤，你应该能够更有效地在Vue项目中排查和解决内存泄漏问题。

当前使用 memeory来对比两个快照的数据

对比的时候，那些字段都是什么意思。
deleted,delta,new,alloc.size,free. size, size delta

在Chrome DevTools的Memory面板中，当你对比两个堆快照时，会看到一些关键的字段，这些字段提供了关于对象在快照之间变化的信息。下面是你提到的每个字段的含义：

Deleted:
这个字段表示在第二个快照中相对于第一个快照已经不存在的对象数量。如果对象被删除或不再被引用，它们将从堆中移除，并在“Deleted”列中显示。
Delta:
“Delta”字段显示了对象数量在两个快照之间的变化量。这个值可以是正数也可以是负数。正数表示在第二个快照中新增的对象数量（相对于第一个快照），负数表示在第二个快照中减少的对象数量（即被删除的对象）。然而，需要注意的是，这里的“Delta”通常指的是在对比视图中特别关注的某个分类或对象集合下的变化量，而不是全局对象数量的净变化。
New:
“New”字段表示在第二个快照中相对于第一个快照新出现的对象数量。这些是在第一个快照中不存在，但在第二个快照中被创建或添加到堆中的对象。
Alloc. size (Allocation size):
这个字段显示了对象及其子对象（如果有的话）在堆上分配的总内存大小。它是对象在创建时占用的内存量，包括对象本身和它所引用的其他对象（如数组的元素、对象的属性等）的内存。
Free. size (Free size):
需要注意的是，在标准的堆快照对比视图中，通常不会直接显示“Free size”这个字段。这可能是因为它不是一个直接用于描述对象变化的字段。然而，在内存管理的上下文中，“free size”可能指的是堆上当前未被使用的内存量，但这通常是通过分析整个堆的快照来间接得出的，而不是通过对比两个快照之间的差异。
Size delta:
“Size delta”字段（尽管在标准的快照对比视图中可能不直接以这个名称出现）可能指的是在对比的两个快照之间，特定对象集合或分类的内存大小变化量。这个值反映了对象占用的内存是增加了还是减少了，以及增加了多少或减少了多少。
请注意，Chrome DevTools的界面和可用的字段可能会随着浏览器版本的更新而发生变化。因此，如果你发现上述描述与你的DevTools版本不完全匹配，建议查看最新的Chrome DevTools文档或教程。

此外，为了更准确地分析内存泄漏，你应该关注那些在“New”列中显著增加但在“Deleted”列中没有相应减少的对象，以及它们的“Alloc. size”和可能的“Size delta”值。这些对象可能是内存泄漏的源头。

推荐博客

JS 中的内存回收和内存泄露
https://blog.csdn.net/waiting677/article/details/103973731