【XXG学习记录04】在vue中销毁监听removeEventListener

it2023-07-20  69

前言🐷

在回顾之前作品demo时发现,我在监听鼠标的时候,即使退出了“当前页面”也没有消除监听。 发现原因是我退出了“当前页面”后,还在控制台看到了“console.log”的输出

后面使用了vue中的destroyed生命周期函数来在“这个页面组件销毁时” 配合window.removeEventListener('mousemove',this.move)来销毁监听。

但是没用

解决方法

问题其实出现在👇 我在主组件APP.vue中使用了keep-alive

<keep-alive> <router-view></router-view> </keep-alive>

keep-alive 导致页面缓存了,没有触发组件销毁destroyed

组件被缓存,退回首页的时候自然就没有被销毁了,所以我们利用回首页路由转变👇

手动触发destroy 👇就是当路由发现变化时,调用destroy

beforeRouteLeave(to, from, next) { this.$destroy(); next(); }, destroyed() { window.removeEventListener('mousemove',this.move) console.log('销毁成功') }

还有一个原因:我在监听和销毁时 所指定的那个方法。 比如👇

window.addEventListener('mousemove',(e)=>this.move(e)) //这个是增加监听 '鼠标' 和 window.removeEventListener('mousemove',(e)=>this.move(e)) //这个是销毁监听 '鼠标'

这样是不行的,因为他们指定的不算是同一个方法,也就是说,我们不能使用this.move(e)这样传参的方式!(虽然我们监听的目的是为了传参数e)

根据试验,可以使用下面这样的方式👇

window.addEventListener('mousemove',this.move) 和 window.removeEventListener('mousemove',this.move)

也就是说,在methods中的move(e)直接就可以拿到参数e了 👇

methods:{ move(e){ console.log(e) } },

而且也不要使用匿名函数。

这样就可以销毁监听了。

总结👇

用路由跳转的监听方式来探测组件被关闭,然后调用相应的“销毁监听方法”(由于我使用了keep-alive)【如果没有使用,是会直接调用vue的生命周期函数的】

在销毁监听时,不要直接传参也不要使用匿名函数。监听后得到数据会直接作用在后面的方法中。

参考文章

参考文章1 参考文章2

最新回复(0)