美文网首页让前端飞程序员
vue中解绑全局事件

vue中解绑全局事件

作者: jia林 | 来源:发表于2018-06-25 10:18 被阅读20次

在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);
  }

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

相关文章

  • vue中解绑全局事件

    在vue中,写在methods里面的方法,在页面切换时一般就自动销毁了,但是写在window上的事件,需要我们手动...

  • Vue中全局事件的解绑

    当我们写Vue项目的时候,大部分时候,我们绑定事件都是在具体的组件上通过@去绑定的例如 这样的写法,事件只会在具体...

  • vue中移除事件、解绑事件

    点击事件示例: @click = 'isBtn && myBtn()' 执行过程会优先判断 isBtn 是否为 t...

  • 全局事件的解绑

    如果不进行解绑,那么就会在所有页面生效这个事件。因为他是绑定在window对象上的,所以相当于全局事件

  • 【Vue23】对全局事件的解绑

    这块内容很重要!!!很多初学者因为没有对全局事件及时解绑,造成代码大量的bug,【其实在看这里之前,我也不会记得对...

  • 对全局事件的解绑

    问题的产生:在详情页面,我们对拖动页面绑定了scroll事件,实现对header区域的渐隐渐现效果,如图1。不过这...

  • JS基础学习:为元素解绑事件

    解绑事件 用什么方式绑定事件,就应该用对应的方式解绑事件。有三种方式 1.解绑事件对象.on事件名字=事件处理函数...

  • jQuery篇之操作jQuery对象(事件)

    事件对象e 绑定、解绑 on 解绑 手动触发(自定义事件) trigger triggerHandler clic...

  • 事件解绑

    用什么方式绑定事件就应该用什么方式解绑事件 解绑事件: 对象.on事件名字=事件处理函数--->绑定事件对象.on...

  • 事件解绑

网友评论

    本文标题:vue中解绑全局事件

    本文链接:https://www.haomeiwen.com/subject/cgbeyftx.html