vue 刷新页面所占用的内存没有被释放，刷新页面增加内存的问题（重要）

2024-04-09 07:16| 来源: 网络整理| 查看: 265

场景：

在vue项目正常情况，我们都知道开启的定时器setInterval、监听器watch、eventBus事件总线监听器、以及一些其他外部js的监听器，需要在beforeDestroy中卸载。如果没有进行卸载，那么他们相关回调函数使用的变量，就不会被卸载，最后很有可能会造成内存泄露的问题，也就是在这个页面一直访问，最后内存占满之后页面直接崩溃了。

但有的时候我们在beforeDestroy也对这些定时器监听器什么的进行了卸载删除，但是刷新页面之后内存还是一直增加，只有关闭页面内存才真正被释放了。

说明：

针对这个问题，在网上查看了很多资料，最后发现，刷新页面的时候，vue的组件生命周期beforeDestroy和destroyed都没有被触发，所以清除定时器的api也就没有被执行，相关依赖的变量、内存也就没有被释放。

解决办法：

考虑到我很多组件都是用了定时器、监听器和事件总线。我在app.vue里面执行了v-if操作，当监听到用户执行刷新的操作时，将v-if的值改为false，组件就会触发beforeDestroy。

app.vue。代码：

data () { return { isShow:false, }; }, mounted () { window.addEventListener("beforeunload",(e)=> { console.log('刷新'); this.isShow=false; window.removeEventListener('beforeunload', ()=>{})//移除这个监听 }); },

【本文地址】

公司简介

联系我们