解决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 相关文章推荐
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
javascript实现用户必须勾选协议实例讲解
Mar 24 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
文件上传类
2006/10/09 PHP
php+dbfile开发小型留言本
2006/10/09 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
js实现放大镜特效
2017/05/18 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
Python中dict和set的用法讲解
2019/03/28 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
Python守护进程实现过程详解
2020/02/10 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
Python 实现一个计时器
2020/07/28 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
技术总监管理职责范本
2014/03/06 职场文书
红色旅游心得体会
2014/09/03 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技