解决vue 给window添加和移除resize事件遇到的坑


Posted in Javascript onJuly 21, 2020

在vue项目中需要监听window窗口变化来时时计算图片的高度,于是就加了一个监听事件;确实监听到了,但是在离开当前页面进入其他页面改变窗口大小时发现window还是处于监听状态,即移除监听事件并没有生效。

//之前的写法,这样写移除监听事件无效
  mounted(){
    window.addEventListener('resize',()=>{
      '改变窗口大小时需要做的处理'
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize");
  }

后来查找相关资料后发现用下面这种写法可以移除监听

methods: {
    listenResize(){
      '窗口大小改变时的操作'
    }
  },
  mounted(){
    window.addEventListener('resize',this.listenResize); 
  },
  beforeDestroy() {
    window.removeEventListener("resize",this.listenResize);
  }

补充知识:vue 监听屏幕变化 & 销毁监听事件

记一次小坑.

由于用到 echarts 需要自适应屏幕,所以在vue中用了监听事件并且考虑到性能问题,所以用lodash 库的 debounce 做了包裹.代码如下:

mounted() {
  window.addEventListener('resize', debounce(this.resize,200), true)
},
beforeDestroy() {
  window.removeEventListener('resize', this.resize, true)
},
methods: {
  resize() {
   this.radarChart.resize()
  }
}

然而发现切换到其他的页面的时候,屏幕改变的时候还是会触发 resize 事件,因为之前写过类似功能,代码是没有问题的,但是就是会触发,心里也是觉得奇怪,研究了一下,发现 addEventListener 的方法里面不加 debounce 就可以了.如下:

mounted() {
  window.addEventListener('resize', this.resize, true)
},
beforeDestroy() {
  window.removeEventListener('resize', this.resize, true)
},
methods: {
  resize: debounce(function() {
   this.radarChart.resize()
  }, 300),
 }

debounce 需要加在 methods 里面.并且内部函数体不能使用箭头函数,否则会报 this undefined 的问题

以上这篇解决vue 给window添加和移除resize事件遇到的坑就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 Javascript
Javascript Request获取请求参数如何实现
Nov 28 Javascript
javascript操作referer详细解析
Mar 10 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
深入理解ES7的async/await的用法
Sep 09 Javascript
Vue中的字符串模板的使用
May 17 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
js实现简单选项卡制作
Aug 05 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 Javascript
js实现带积分弹球小游戏
Jul 21 #Javascript
在vue中created、mounted等方法使用小结
Jul 21 #Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 #Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 #Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 #Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 #Javascript
vue 清空input标签 中file的值操作
Jul 21 #Javascript
You might like
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
js匿名函数使用&传参(实例)
2017/09/08 Javascript
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
Python对象与引用的介绍
2019/01/24 Python
Python初学者常见错误详解
2019/07/02 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
判断单链表中是否存在环
2012/07/16 面试题
性能测试工程师的面试题
2015/02/20 面试题
公司员工的自我评价范例
2013/11/01 职场文书
数控机床专业自荐信
2014/05/19 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
授权委托书
2014/07/31 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
给老师的一封感谢信
2015/01/20 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
《称赞》教学反思
2016/02/17 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书