【Vue23】对全局事件的解绑

这块内容很重要!!!
很多初学者因为没有对全局事件及时解绑,造成代码大量的bug,【其实在看这里之前,我也不会记得对全局事件解绑⁄(⁄⁄•⁄ω⁄•⁄⁄)⁄
举个栗子,我某个项目中有对window进行了事件绑定:

就是它

看起来没有问题,其实带来了挺多后患。
先打个岔,绑定在组件内部的标签上的事件会有这种问题吗?
不会有任何问题,因为这个事件仅仅绑定在这个组件内部的某个元素上,所以它仅仅作用于这个组件的内部,它不会影响外部的组件。
但是如果在这个组件内,写的是window这个全局对象的事件绑定,那就有大事了。
验证一下
我在组件内部对window绑定的函数内打印一下这个scroll
打印一下它

【注意现在仅仅是在详情的Header组件内打印一下这个scroll
打印出来了

当我们回到首页,【前方高能!!!】
也触发了

并且当我们在首页滑动的时候,都是实时运行着handleScroll这个函数。
WHY
因为这个scroll并不是绑定在组件中,而是绑定在window对象上,所以它不仅仅对本组件有效果,对其他组件也产生了影响。
怎么解决?
当我们对组件使用keep-alive的时候,会多出一个activated生命周期函数,与之对应的是另外多出的一个生命周期函数deactivated,它是页面即将被隐藏,或者页面即将被替换成新页面的时候,这个钩子会被执行。
那么在deactivated执行这样一个事情。
window.removeEventListener('scroll', this.handleScroll)
解绑

此时再去试验一下,首页不再会被影响了。

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

推荐阅读更多精彩内容

  • 1.ios高性能编程 (1).内层 最小的内层平均值和峰值(2).耗电量 高效的算法和数据结构(3).初始化时...
    欧辰_OSR阅读 29,600评论 8 265
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,284评论 25 708
  • 事件绑定的方式 给 DOM 元素绑定事件分为两大类:在 html 中直接绑定 和 在 JavaScript 中绑定...
    Bruce_zhuan阅读 1,055评论 0 6
  • 路还是要走 不管沿途有多么美好的风景 希望不要迷失了自己 不忘初心 随着自己的成长 慢慢的看透这个世界 无论现在的...
    黑夜的蝙蝠侠阅读 141评论 0 0
  • 瑟雨带风撒透wun风地该都 木黑雨啬桑安木故地仰忙 忙航孤单地满灯 系那桑感地gi忆 坐起泛黑sam里木素地系您 ...
    liwendong阅读 273评论 0 0