Vue-Cesium内存泄漏问题！！！viewer记得及时销毁！

背景：利用Vue+Cesium加载大场景模型时，初次加载能行，但是切换前端路由重新加载时发现不行，浏览器崩溃了！！！ 

然后利用Chrome的 开发者工具性能面板跟踪JS堆【1】，发现JS堆不断上升，再切换前端路由（组件销毁）时也不见下降趋势！！！内存泄露了！！！变量未销毁！！！

 【1】chrome浏览器如何查看内存泄漏

在Chrome浏览器中查看内存泄漏，主要可以通过开发者工具中的“Memory”面板来完成。以下是一步一步的指导：

一、打开开发者工具

1. 打开Chrome浏览器：确保你的Chrome浏览器是最新版本，以获得最佳的开发者工具体验。
2. 打开开发者工具：你可以通过右键点击页面上的任意元素，选择“检查”（Inspect），或者使用快捷键Ctrl+Shift+I（Windows）或Cmd+Option+I（Mac）来打开开发者工具。

二、转到“Memory”面板

1. 选择“Memory”面板：在开发者工具的顶部菜单中，选择“Memory”面板。这个面板专门用于内存分析，包括内存泄漏的识别。

三、记录内存使用情况

1. 开始记录：在“Memory”面板中，点击左上角的圆形记录按钮（在某些版本的Chrome中可能是一个红色的圆点）开始记录内存使用情况。你也可以在开始记录前点击旁边的“Garbage Collection”按钮（垃圾桶图标）来触发垃圾回收，以确保记录的准确性。
2. 执行操作：在浏览器中执行一系列操作，模拟用户的使用情况。这些操作应该涵盖你怀疑可能存在内存泄漏的部分。
3. 停止记录：一段时间后，点击停止按钮（通常是一个正方形按钮）来结束记录。此时，Chrome会生成一个内存使用情况的时间线。

四、分析内存使用情况

1. 查看堆快照：你可以点击“Take snapshot”按钮来获取一个堆快照，堆快照是JavaScript内存堆的一个快照，它可以显示你的页面在某一时刻的内存使用情况。
2. 分析堆快照：在获取堆快照后，你可以在“Summary”视图中看到所有对象的列表，以及它们的构造函数、大小和距离根的距离。通过这些信息，你可以找出可能的内存泄漏。
3. 比较堆快照：如果你在不同时间点获取了多个堆快照，可以在“Comparison”视图中比较它们。这可以帮助你找出哪些对象在长时间内没有被释放，从而可能是内存泄漏的原因。

五、使用其他工具

除了“Memory”面板外，Chrome开发者工具中的“Performance”面板也可以用于内存泄漏的排查。在“Performance”面板中，你可以记录和分析JavaScript的运行时性能，包括内存使用情况。通过开启“Memory”复选框，你可以在录制时实时查看内存使用情况。

六、注意事项

1. 垃圾回收：在记录和分析内存使用情况前，确保触发垃圾回收，以获得更准确的内存占用数据。
2. 重复测试：内存泄漏可能不是每次都能被轻易发现，因此建议多次重复测试，以确认是否存在内存泄漏。
3. 代码审查：在确认存在内存泄漏后，需要仔细审查相关代码，找出泄漏的原因并进行修复。

通过以上步骤，你可以在Chrome浏览器中有效地查看和排查内存泄漏问题。

然后就去修改源代码，再beforeDestory生命钩子内销毁viewer变量！！！ 

为了提高性能，viewer变量不建议定义为data监管的数据，建议直接挂载再全局变量window上

经过调整，果然，好了！！！ 

Cesium+Vue使用建议：

浏览器在加载Cesium大场景模型后，如果必须刷新浏览器才能避免内存满而崩溃的问题，通常是由于以下几个原因造成的：

1. 内存管理不当

Cesium在渲染大规模地理空间数据时，会占用大量的浏览器内存。如果Cesium或其集成的前端框架（如Vue、React等）没有正确地管理这些资源，比如没有及时释放不再使用的模型数据或纹理资源，就可能导致内存不断累积，最终耗尽浏览器可用内存而崩溃。

2. 数据加载策略问题

当加载大场景模型时，如果一次性加载了过多的数据，而没有采用分批加载、懒加载等策略，也会使得浏览器在短时间内承受巨大的内存压力。此外，如果数据加载过程中没有有效的缓存机制，每次重新加载场景时都会重新下载相同的数据，进一步加剧了内存消耗。

3. Cesium和Vue等框架的集成问题

在Vue等现代前端框架中集成Cesium时，可能会遇到数据劫持、响应式系统更新等问题。例如，Cesium对象被不当地放在了Vue的响应式数据结构中，导致Vue不断地对Cesium对象进行依赖追踪和更新，这不仅增加了额外的性能开销，还可能引起内存泄漏。

解决方案

1. 优化内存管理

• 使用Cesium提供的资源清理方法，如viewer.entities.removeAll()、viewer.scene.primitives.removeAll()等，在组件销毁时释放资源。
• 定期检查并移除不再使用的Cesium对象，避免内存泄漏。

2. 优化数据加载策略

• 采用分批加载、懒加载等技术，减少一次性加载的数据量。
• 实现有效的缓存机制，避免重复下载相同的数据。

3. 改进框架集成方式

• 避免将Cesium对象放在Vue等框架的响应式数据结构中。
• 使用非响应式的方式来管理Cesium对象，例如将Cesium viewer挂载到全局对象上（如window.viewer），并在需要时通过全局对象访问。

4. 升级Cesium和前端框架

• 确保Cesium和前端框架都是最新版本，以便利用最新的性能优化和bug修复。

5. 监控和调试

• 使用浏览器的开发者工具来监控内存使用情况，查找可能的内存泄漏点。
• 在开发过程中注意调试和测试，及时发现并解决内存管理问题。

综上所述，浏览器加载Cesium大场景模型后必须刷新才能避免内存满而崩溃的问题，通常是由于内存管理不当、数据加载策略问题或框架集成问题导致的。通过优化这些方面，可以显著提高Cesium应用的稳定性和性能。