22/09/26 vue3,页面监听scroll&移除scroll

坑1：vue是单页面应用，页面上window.addEventListener，scroll事件后，每个页面都能够监听到scroll事件
坑2:
直接移除监听事件，一直不能成功移除，需要先将函数单独声明出来，后续才能移除

---

代码，为了性能优化，使用了防抖函数

import { ref, onBeforeMount, computed, reactive, watch, nextTick, onUnmounted, onMounted } from "vue";
//监听滚动事件 
onMounted(() => {
    window.addEventListener("scroll", debounceLoad, false);
})

//声明函数，方便移除监听
//这里多用防抖函数嵌套了一下，自己不需要的话，可以写在一起
const debounceLoad = debounce(onScrollFunc);

//滚动高度赋值
const onScrollFunc = () => {
    pageScrollY.value = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    console.log('触发滚动pageScrollY', pageScrollY.value);
}

//防抖 滚动结束执行
function debounce(fn, interval = 500) {
    let timeout = null;

    return function () {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, interval);
    };
}

//移除监听 组件实例被卸载后调用
onUnmounted(() => {
    // console.log('onUnmounted');
    window.removeEventListener('scroll', debounceLoad, false);
});

---

参考链接：
防抖函数参考网上的资源，找不到链接了
项目中关于监听和移除scroll的坑

可能用到
vue项目中对于Scroll事件的节流优化（写法vue2）