场景:
在vue项目正常情况,我们都知道开启的定时器setInterval、监听器watch、eventBus事件总线监听器、以及一些其他外部js的监听器,需要在beforeDestroy中卸载。如果没有进行卸载,那么他们相关回调函数使用的变量,就不会被卸载,最后很有可能会造成内存泄露的问题,也就是在这个页面一直访问,最后内存占满之后页面直接崩溃了。
但有的时候我们在beforeDestroy也对这些定时器监听器什么的进行了卸载删除,但是刷新页面之后内存还是一直增加,只有关闭页面内存才真正被释放了。
说明:
针对这个问题,在网上查看了很多资料,最后发现,刷新页面的时候,vue的组件生命周期beforeDestroy和destroyed都没有被触发,所以清除定时器的api也就没有被执行,相关依赖的变量、内存也就没有被释放。
解决办法:
考虑到我很多组件都是用了定时器、监听器和事件总线。我在app.vue里面执行了v-if操作,当监听到用户执行刷新的操作时,将v-if的值改为false,组件就会触发beforeDestroy。
app.vue。代码:
<template>
<div class="body">
<div v-if="isShow">
<router-view />
</div>
</div>
</template>
data () {
return {
isShow:false,
};
},
mounted () {
window.addEventListener("beforeunload",(e)=> {
console.log('刷新');
this.isShow=false;
window.removeEventListener('beforeunload', ()=>{})//移除这个监听
});
},