解决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返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
javascript 动态创建表格
Jan 08 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
AngularJS基础 ng-if 指令用法
Aug 01 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
javascript实现贪吃蛇小游戏
Jul 28 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
福利彩票幸运号码自动生成器
2006/10/09 PHP
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
python实现的各种排序算法代码
2013/03/04 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
个人委托书格式
2014/04/04 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
导游词之南京中山陵
2019/11/27 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
总结一些Java常用的加密算法
2021/06/11 Java/Android
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android