【VUE】监控大屏运行时间长后卡顿，如何解决

项目中遇到一个问题，监控大屏共五页，前后翻页依据路由跳转，其中有两页每分钟刷新5万+数据并在地图上打点，运行时间长了会出现卡顿，甚至卡死情况。

初始方案

上一个开发人员做了这样的处理：在销毁数据量大的大屏页面前，强制刷新当前页面

beforeDestroy() {
	location.reload()
},

这样做可以在切换页面时清除了浏览器已存在的内存，但强制刷新会使页面出现短暂白屏，影响体验
然后踏上了寻找解决办法之路

–首先，我查找了vue刷新页面的方式都有哪些
原文：https://www.jb51.net/javascript/292692fh9.htm

1. 使用 location.reload() 方法进行页面刷新：这个方法会重新加载当前页面，类似于用户点击浏览器的刷新按钮。
2. 在路由跳转时，使用 $router.go(0) 方法实现当前页面的刷新：会重新加载当前路由所对应的组件，相当于重新渲染页面。
3. 在组件中，通过设置组件的 key 属性来触发组件的重新渲染，从而实现页面的刷新。

<my-component :key="refreshKey"></my-component>

4. 使用 window.location.href = window.location.href 实现当前页面的刷新。
5. 使用 window.location.reload(true) 方法实现当前页面的刷新，其中 true 表示强制使用缓存刷新。
6. 使用 meta 标签中的 http-equiv 属性设置为 refresh 实现页面的自动刷新；但是，使用 meta 标签实现的自动刷新功能，用户无法手动停止刷新或者修改刷新时间间隔，可能会对用户体验造成一定程度的影响。
7. 在需要刷新的组件中，通过 $forceUpdate() 方法实现组件的强制更新，从而实现页面的刷新。

这些方式或多或少都存在不符合需求的点，所以全部放弃。

–然后，我想关注下如何清理浏览器内存，只要在切换页面时清除内存也可以达到目的

VUE内存泄漏排查
泄漏原因：js闭包、全局变量、dom事件监听、循环定时器、组件的泄漏导致DOM上挂载的事件、对象数组等的数据也跟着无法释放。
排查：

• echarts图是否在页面销毁时彻底删除
  每个图组件的生命周期函数中都做了删除操作

this.myChart.dispose();
this.myChart = null;

• setTimeOut和setInterval是否清除
  beforeDestroy()中已清除定时器
• 全局变量是否清除
  没有使用全局变量

在代码中检查后，以上三个问题均未发现，且在销毁页面前，对地图也做了销毁处理

    this.amapManager.getMap().destroy();
    this.amapManager = null;

我还在生命周期beforeDestroy中，将所有变量置为null；
在生命周期beforeDestroy中销毁组件，

	this.$destroy()；

调用vue的刷新方式

	this.$forceUpdate()；

都没有很好的效果。

–关注到测试提出不想要刷新后的白屏效果，我又查找刷新不出现白屏，一个局部刷新的方法：
原文：https://blog.csdn.net/m0_53912016/article/details/126302923
APP.vue

<template>
    <div id="app">
    	<router-view v-if="isRouterAlive"></router-view>
	</div>
</template>
<script>
    export default {
        name: 'App',
        provide () {    //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。                                             
            return {
                reload: this.reload                                              
            }
        },
        data() {
            return{
                isRouterAlive: true                    //控制视图是否显示的变量
            }
        },
        methods: {
            reload () {
                this.isRouterAlive = false;            //先关闭，
                this.$nextTick(function () {
                    this.isRouterAlive = true;         //再打开
                }) 
            }
        },
    }
</script>

页面中

export default {
  inject:['reload'], //注入reload方法
  data() {
	return{
	}
}

需要刷新页面时

this.reload();

这种方法确实可以达到刷新页面且不白屏的效果，为每个大屏页面都添加此方法，发现浏览器内存并不会持续上涨，在数据量小且逻辑处理简单的页面会下降，故暂时采取此方案。
在数据量大、处理逻辑复杂页面，仍然会占用很高内存，后续将优化接口请求、数据渲染方式。
如有更好的方案，还请大佬们指点~~