解决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 相关文章推荐
javascript函数式编程程序员的工具集
Oct 11 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
Vue2.0系列之过滤器的使用
Mar 01 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 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
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
PHP模板解析类实例
2015/07/09 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
js字符编码函数区别分析
2008/06/05 Javascript
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
javascript cookies操作集合
2010/04/12 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
django项目搭建与Session使用详解
2018/10/10 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
个人找工作自荐信格式
2013/09/21 职场文书
大学生秋游活动方案
2014/02/17 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
针对吵架老公保证书
2015/05/08 职场文书
毕业设计工作总结
2015/08/14 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
Python深度学习之实现卷积神经网络
2021/06/05 Python
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server