vue3如何移除当前组件（封装的触底组件，请求方法都在此组件中）的scroll监听事件？

Question

onMounted(() => {
    onReachBottom() 
})
onBeforeUnmount(() => {
    window.removeEventListener('resize', getWindowResize)
    window.removeEventListener('scroll', onBottom)
})

// 触底函数
const onReachBottom = () => {
    window.addEventListener('scroll', onBottom)
}
// 触底相应函数
const onBottom = () => {
    // 获取可视高度
    let clientHeight = document.documentElement.clientHeight;
    // 获取滚动高度
    let scrollTop = document.documentElement.scrollTop
    // 滚动条高度
    let scrollHeight = document.documentElement.scrollHeight
    // console.log(clientHeight + scrollTop);
    // console.log(scrollHeight);
    if (clientHeight + scrollTop + 500 >= scrollHeight && !loading.value) {
        console.log('触底了')
        loading.value = true
        const instance = LoadingPlugin({
            attach: () => content.value,
            showOverlay: false,
            size: '20px',
        });
        page.value++
        let mold = ref('')
        if (props.mold == 'new') {
            mold.value = 'new'
        } if (props.mold == 'hot') {
            mold.value = 'hot'
        } if (props.mold == 'mine') {
            mold.value = 'mine'
        }
        getGallery(page.value, mold.value).then(res => {
            console.log(res);
            if (res.status == 'ok') {
                instance.hide();
                list.value.push(...res.data)
                loading.value = false
            }
        })
    }
}

Answer 1

【以下回答由 GPT 生成】

问题梳理准确无误，以下是对问题的期望结果的补充：

期望结果是，在Vue3中能够通过适当的方式添加和移除当前组件的滚动监听事件，以确保其在需要时触发，不需要时停止触发。需要尽可能使用Vue3的特性和API来实现这一功能。

另外，鉴于提供的代码片段只是一个部分，且缺少一些变量和函数的定义，如果可能的话，请提供完整的代码或更多的上下文信息，以便更好地理解问题。谢谢！

【相关推荐】

• 这篇文章讲的很详细，请看：vue监听scroll事件无效？（踩坑记录）
• 除此之外, 这篇博客: vue无缝滚动轮播 scroll中的 3.使用 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^