Vue JS removeEventListener 不起作用。为什么？

Question

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);    }  },}这条线不工作，为什么？window.removeEventListener("scroll", handler, false); 我尝试了所有方法：箭头函数、函数声明等。但是那个事件监听器根本没有删除。

Answer 1

我有一个类似的问题，最后我用另一种方法解决了它once，在addEventListener函数的参数中添加自动删除它的选项并且它对我有效，以防万一可以帮助您检查参数

Answer 2

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

1. 使用onScroll()方法来处理滚动的逻辑。您只需在添加/删除事件侦听器中传递此方法引用

2. 您应该将您的缓存lastScrollTop作为组件数据的一部分。3，然后，您只需在mounted()生命周期钩子中添加滚动事件监听器，并在destroyed()生命周期钩子中将其移除。

请参阅下面的更新代码：

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;

    }

  },

}