Vue学习笔记-项目开发4.4全局事件解绑

对全局事件解绑

       在组件上定义方法，不解绑的情况下，组件上定义的方法由于仅局限于当前组件并不会影响到全局的使用，但是如果使用Window，将事件绑定在window上的话则绑定组件会起作用，其他组件也会起作用，所以需要对全局事件进行解绑，这样可以将功能仅局限于定义功能的这个组件上

       1、定位到当前项目中，在详情页面中滑动实现渐隐渐现的效果中通过window.addEventListener来绑定scroll事件，这个表面上看起来是没啥问题。但其实是有问题的。因为他绑定的是window全局事件。也就是说 不仅仅在当且页面会触发，在别的页面也有可能触发 比如说这事件在页面滑动的时候输出scroll。 在当前页面是这么输出。返回到首页后，然后会在输出

       2、解决方法
添加解绑动作的生命周期函数接触绑定即可：

  deactivated () {
    window.removeEventListener('scroll', this.handleScroll)
  }

【注】：对于activated和deactivated说明可查阅官网文档https://cn.vuejs.org/v2/api/#activated，即需要将内容包裹在一个< keep-alive>标签才能够调用这两个生命周期函数

// Detail.vue
 
<template>
  <div>
    <detail-banner></detail-banner>
    // 将header组件包裹
    <keep-alive>
      <detail-header></detail-header>
    </keep-alive>
    <div class="content"></div>
  </div>
</template>