vue中解绑全局事件

在vue中,写在methods里面的方法,在页面切换时一般就自动销毁了,但是写在window上的事件,需要我们手动解绑,也是为了提高代码执行效率,案例如下:
1、 当我在新闻资讯页面执行滚动事件时,不断从控制台打印出1


image.png

2、切换到其他页面也会执行滚动事件


image.png
  • 代码如下
 // 滚动侧边栏浮动
  sideFloat() {
    // tslint:disable-next-line:no-console
    console.log(1);
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    scrollTop > 410 ? this.isFloat = true : this.isFloat = false;
  }
  mounted() {
    window.addEventListener("scroll", this.sideFloat);
  }

解决方案,使用生命周期函数beforeDestroy,在页面离开时执行

 // 对滚动事件绑定及解绑
  beforeDestroy() {
    window.removeEventListener("scroll", this.sideFloat);
  }

这样就解决了对全局事件的解绑 +_+

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,033评论 3 119
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 12,006评论 0 25
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,855评论 1 11
  • 2018/4/7 商业教练包班 简单的记录群里丰盛的美好,砥砺前行! 锐庭: 伙伴们,经历了三天的学习,如果让你再...
    梦想家Julia阅读 2,688评论 0 0
  • 1.《额尔古纳河右岸》 小说以一位年近九旬的鄂温克族最后一位酋长女人的自述,写了鄂温克族的百年沧桑、生存现状。这些...
    邰枫的台阅读 3,529评论 2 6