vue 一个简单的项目 之三 详情页面 step4 对全局事件的解绑

上篇，我们实现了，详情页面的Header.vue 组件。但是，上篇的代码有一个问题。本篇来解决。

下面是Header.vue 中script 部分代码。里面 scroll 是定义在window 上的，这样就使得它成为一个全局事件了。这样子，在其他页面滑动页面的时候，也会触发这个事件。这是一个bug 。

<script>
export default {
  name: 'DetailHeader',
  data () {
    return {
      showAbs: true,
      opacityStyle: {
        opacity: 0
      }
    }
  },
  methods: {
    handleScroll () {
      console.log('scroll')
      const top = document.documentElement.scrollTop
      if (top > 60) {
        let opacity = top / 140
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = { opacity }
        this.showAbs = false
      } else {
        this.showAbs = true
      }
    }
  },
  activated () {
    window.addEventListener('scroll', this.handleScroll)
  }
}
</script>

解决起来，也很容易。当我们使用 <keep-alive> 是，不仅会增加activated 钩子函数，还会增加deactivated 钩子函数，分别是页面展示、页面隐藏对应的时刻。

<script>
export default {
  name: 'DetailHeader',
  data () {
    return {
      showAbs: true,
      opacityStyle: {
        opacity: 0
      }
    }
  },
  methods: {
    handleScroll () {
      console.log('scroll')
      const top = document.documentElement.scrollTop
      if (top > 60) {
        let opacity = top / 140
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = { opacity }
        this.showAbs = false
      } else {
        this.showAbs = true
      }
    }
  },
  activated () {
    window.addEventListener('scroll', this.handleScroll)
  },
  deactivated () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

Done!