这块内容很重要!!!
很多初学者因为没有对全局事件及时解绑,造成代码大量的bug,【其实在看这里之前,我也不会记得对全局事件解绑⁄(⁄⁄•⁄ω⁄•⁄⁄)⁄
】
举个栗子,我某个项目中有对window
进行了事件绑定:
就是它
看起来没有问题,其实带来了挺多后患。
先打个岔,绑定在组件内部的标签上的事件会有这种问题吗?
不会有任何问题,因为这个事件仅仅绑定在这个组件内部的某个元素上,所以它仅仅作用于这个组件的内部,它不会影响外部的组件。
但是如果在这个组件内,写的是
window
这个全局对象的事件绑定,那就有大事了。验证一下
我在组件内部对
window
绑定的函数内打印一下这个scroll
,打印一下它
【注意现在仅仅是在详情的Header组件内打印一下这个
scroll
】打印出来了
当我们回到首页,【前方高能!!!】
也触发了
并且当我们在首页滑动的时候,都是实时运行着
handleScroll
这个函数。WHY
?因为这个
scroll
并不是绑定在组件中,而是绑定在window
对象上,所以它不仅仅对本组件有效果,对其他组件也产生了影响。怎么解决?
当我们对组件使用
keep-alive
的时候,会多出一个activated
生命周期函数,与之对应的是另外多出的一个生命周期函数deactivated
,它是页面即将被隐藏,或者页面即将被替换成新页面的时候,这个钩子会被执行。那么在
deactivated
执行这样一个事情。window.removeEventListener('scroll', this.handleScroll)
解绑
此时再去试验一下,首页不再会被影响了。