<script >
// 因为要监听 scroll 事件所以做个节流
// 按需引入 throttle 
import throttle from 'lodash/throttle'
export default {
    mounted() {
        // 添加事件监听
        // 注意这里的this.getScroll不能加()调用
        window.addEventListener('scroll', this.getScroll)
        // VUE2.X 可以在 mounted 使用 hook 钩子去回调执行销毁钩子
        // 就可以少写一个钩子函数，代码逻辑也更连贯
        this.$once('hook:beforeDestory', () => {
            // 移除事件监听
            window.removeEventListener('scroll', this.getScroll)
            
            // 也可以做清除定时器的操作
            // clearInterval(timer)
            // timer = null
        })
    },
    // VUE2.X用 beforeDestory 或 destroyed
    beforeDestory() {
        // 移除事件监听
        window.removeEventListener('scroll', this.getScroll)
    },
    destroyed() {
        // 可以但不建议
        window.removeEventListener('scroll', this.getScroll)
    },
    
    // VUE3.X用 beforeUnmount 或 unmounted
    beforeUnmount() {
        // 移除事件监听
        window.removeEventListener('scroll', this.getScroll)
    },
    unmounted() {
        // 可以但不建议
        window.removeEventListener('scroll', this.getScroll)
    },
    
    methods: {
        // 注意这里的 throttle 不能使用箭头函数
        getScroll: throttle(function () {
        // 做一些操作，我这里是获取高度
            let scrollTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop
        }, 1000),
    },
}
</script>