Javascript Vue JS removeEventListener不工作。为什么？ const选项={ 偏移量：-50 }; 导出默认值{ 名称：'BarMenu'， 数据（）{ 返回{ 滚动方向：“”， } }, 计算：{ cssClasses（）{ 返回{ 隐藏：this.scrollingDirection==='down' } } }, 安装的（）{ 这个； }, 方法：{ ScrollToingElements（）{ 返回此.scrollTo（document.getElementById（'components-inside-content'），600，options）； }, scrollToRecipes（）{ 返回此.scrollTo（document.getElementById（'similor-recipes'），600，选项）； }, scrollToComments（）{ 返回此.scrollTo（document.getElementById（'comments'），600，选项）； }, onScroll（）{ 设lastScrollTop=0； 常量处理程序=（）=>{ 设st=window.pageYOffset | | document.documentElement.scrollTop； 如果（st>lastScrollTop）{ this.scrollingDirection='down'； }否则{ this.scrollingDirection='up'； } lastScrollTop=st

看起来您的逻辑有点过于复杂了。正如Bravo在评论中提到的，您需要对处理程序的静态引用才能解除绑定：您可以简单地将其声明为组件方法。下面是更新代码的方法：

使用

onScroll（）

方法处理滚动上的逻辑。只需在添加/删除事件侦听器中传递此方法引用

您应该将

lastScrollTop

缓存为组件数据的一部分。 3，然后，只需在

mounted（）

生命周期挂钩中添加滚动事件侦听器，然后在

destrocted（）

生命周期挂钩中删除它

请参阅下面的更新代码：

const options = {
  offset: -50
};

export default {
  name: 'BarMenu',
  data() {
    return {
      scrollingDirection: '',
    }
  },
  computed: {
    cssClasses() {
      return {
        hidden: this.scrollingDirection === 'down'
      }
    }
  },
  mounted() {
    this.onScroll();
  },
  methods: {
    scrollToIngredients() {
      return this.$scrollTo(document.getElementById('ingredients-inside-content'), 600, options);
    },
    scrollToRecipes() {
      return this.$scrollTo(document.getElementById('similar-recipes'), 600, options);
    },
    scrollToComments() {
      return this.$scrollTo(document.getElementById('comments'), 600, options);
    },
    onScroll() {
      let lastScrollTop = 0;

      const handler = () => {
        let st = window.pageYOffset || document.documentElement.scrollTop;
        if (st > lastScrollTop) {
          this.scrollingDirection = 'down';
        } else {
          this.scrollingDirection = 'up';
        }
        lastScrollTop = st <= 0 ? 0 : st;
      };

      window.removeEventListener("scroll", handler, false);
      window.addEventListener("scroll", handler, false);
    }
  },
}

const选项={
偏移量：-50
};
导出默认值{
名称：'BarMenu'，
数据（）{
返回{
滚动方向：“”，
lastScrollTop:0，
}
},
计算：{
cssClasses（）{
返回{
隐藏：this.scrollingDirection==='down'
}
}
},
安装的（）{
window.addEventListener（“滚动”，this.onScroll，false）；
},
销毁（）{
removeEventListener（“滚动”，this.onScroll，false）；
},
方法：{
ScrollToingElements（）{
返回此.scrollTo（document.getElementById（'components-inside-content'），600，options）；
},
scrollToRecipes（）{
返回此.scrollTo（document.getElementById（'similor-recipes'），600，选项）；
},
scrollToComments（）{
返回此.scrollTo（document.getElementById（'comments'），600，选项）；
},
onScroll（）{
设st=window.pageYOffset | | document.documentElement.scrollTop；
如果（st>this.lastScrollTop）{
this.scrollingDirection='down'；
}否则{
this.scrollingDirection='up'；
}
this.lastScrollTop=st我有一个类似的问题，最后，我用另一个替代方法解决了它，在
addEventListener
函数的参数中添加
once
选项，该选项会自动删除它，并且对my有效，在这种情况下，可以帮助您检查是否删除处理程序，并在下一行添加I再次出现。这真的是您想要的吗？请更具体一些。
处理程序
在每次运行
滚动
时都不会是相同的
处理程序
，因此如果您的代码试图删除旧处理程序并替换它，那么它将不起作用-您可以将
处理程序
改为一个方法（不过，让它成为一个普通函数，而不是
箭头函数
——不过，为什么每次在Croll上运行时都要将处理程序更改为相同的代码是一个谜。我想在组件销毁时删除此事件侦听器。我尝试在beforeDestroy生命周期挂钩中执行它，但它不起作用。
const options = {
  offset: -50
};

export default {
  name: 'BarMenu',
  data() {
    return {
      scrollingDirection: '',
      lastScrollTop: 0,
    }
  },
  computed: {
    cssClasses() {
      return {
        hidden: this.scrollingDirection === 'down'
      }
    }
  },
  mounted() {
    window.addEventListener("scroll", this.onScroll, false);
  },
  destroyed() {
    window.removeEventListener("scroll", this.onScroll, false);
  },
  methods: {
    scrollToIngredients() {
      return this.$scrollTo(document.getElementById('ingredients-inside-content'), 600, options);
    },
    scrollToRecipes() {
      return this.$scrollTo(document.getElementById('similar-recipes'), 600, options);
    },
    scrollToComments() {
      return this.$scrollTo(document.getElementById('comments'), 600, options);
    },
    onScroll() {
      let st = window.pageYOffset || document.documentElement.scrollTop;
      if (st > this.lastScrollTop) {
        this.scrollingDirection = 'down';
      } else {
        this.scrollingDirection = 'up';
      }
      this.lastScrollTop = st <= 0 ? 0 : st;
    }
  },
}