vue项目中销毁window.addEventListener事件监听解析
更新时间：2022年07月27日 10:19:26 作者：前端小木偶
这篇文章主要介绍了vue项目中销毁window.addEventListener事件监听，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
销毁window.addEventListener事件监听
今天在做项目的过程中，组件中调用iframe时，由于在组件的created方法中写了监听，用于接收iframe发来的信息，但是在组件销毁的时候并没有去掉监听，导致组件创建几次，监听方法就会执行几次，特此记录
created() {
window.addEventListener('message', this.receiveMessage, false)
},beforeDestroy() { // 在组件生命周期结束的时候销毁。
window.removeEventListener('message', this.receiveMessage, false)
},window.addEventListener监听scroll事件
今天想在vue的项目里面用下拉加载，然后就直接写了:
mounted () {
window.addEventListener( 'scroll', this.scrollHander)
},
methods: {
scrollHander () { }
}但是我发现我切换路由以后依旧其他页面也触发了scrollHandler函数，然后我想到使用了vue-router做的spa项目，window对象不变的，所以需要在每次使用后销毁。
解决办法
我回去看了下vue文档的生命周期，看到了destroyed，然后直接在这个周期内销毁就可以了。
mounted () {
window.addEventListener('scroll', this.scrollHander)
},
destroyed () {
window.removeEventListener('scroll', this.scrollHander)
}使用throttle出现的新问题
下拉加载一般需要配合throttle限流函数(原理可以看这里)来避免频繁触发，所以优化代码成这样：
mounted () {
let _this = this
window.addEventListener('scroll', throttle(() => {
_this.scrollHander()
},200 ))
},然后发现没法用removeEventListener了，因为这个函数第二个参数不接受匿名函数。
最后代码
用一个变量中转下
mounted () {
let _this = this
this.throttleLoad = throttle(() =>{
_this.scrollHander()
},200)
window.addEventListener('scroll', this.throttleLoad)
},
destroyed () {
window.removeEventListener('scroll',this.throttleLoad)
},
methods: {
scrollHander () { }
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue-router启用history模式下的开发及非根目录部署方法
这篇文章主要介绍了vue-router启用history模式下的开发及非根目录部署方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要给大家介绍了关于前端Vue项目国际化解决方案的实战记录,以上只是一部分Vue项目开发中遇到的典型问题和解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了Vue3 Reactive响应式原理逻辑详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-07-07
这篇文章主要为大家详细介绍了vue实现计算器的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
Vue.js基础之监听子组件事件v-on及绑定数据v-model学习
这篇文章主要为大家介绍了Vue.js基础之监听子组件事件v-on及绑定数据v-model学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
vue中v-for和v-if不能在同一个标签使用的最新解决方案
这篇文章主要介绍了vue中v-for和v-if不能在同一个标签的最新解决方案,这里描述了两种解决方案，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-07-07
说到Vue缓存，我们肯定首先选择官方提供的缓存方案keep-alive，本文主要介绍了详解Vue适时清理keepalive缓存方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了Vue单文件组件开发实现过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
progressbar组件在一个可以直接运行的npm包，通过Yeoman进行构建，再通过Gulp+Webpack构建工具。这篇文章给大家介绍了Vue进度条progressbar组件2018-04-04
这篇文章主要为大家详细介绍了Vue+Openlayers实现实时坐标点展示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论