为什么 removeEventListener 在我的 Nuxt 应用程序中无法正常工作？

Question

当我的应用程序上有搜索结果时，下面的组件会呈现，它会检查用户滚动是否在页面底部。 代码起初运行良好，但是在导航出页面并返回页面并滚动之后，我得到了错误

未捕获的类型错误：无法读取 VueComponent.handleScroll 处未定义的属性“getBoundingClientRect”

<template>
    <div class="grid-card-layout scrolling-component" ref="scrollComponent">
        <slot/>
    </div>
</template>

<script>
export default {
    methods: {
        handleScroll() {
            let element = this.$refs.scrollComponent
            if (element.getBoundingClientRect().bottom < window.innerHeight) {
                window.removeEventListener('scroll', this.handleScroll);
                return this.$emit("load-more");
            }
        },
        mountOnScroll() {
            window.addEventListener('scroll', this.handleScroll);
        }
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll);
        // Start observing the target node for configured mutations
        const observer = new MutationObserver(this.mountOnScroll);
        observer.observe(this.$refs.scrollComponent, {
            attributes: true, 
            childList: true, 
            characterData: true
        });
    },
    unmounted() {
        window.removeEventListener('scroll', this.handleScroll);
    }
}
</script>

Answer 1

unmounted是一个 Vue3 生命周期：https ://v3.vuejs.org/guide/composition-api-lifecycle-hooks.html

在 Vue2 中，钩子是beforeDestroy并被destroyed ，如 API 所示： https ://v2.vuejs.org/v2/api/#beforeDestroy

这是 Vue2 的生命周期图： https ://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram