javascript - 当我离开时完全删除对先前 Vue 组件的引用

Question

我有一个/foo监听scroll和resize事件的 Vue 组件：

export default {
    name: 'foo',
    mounted() {
        window.onresize = function (event) {
            //doing stuff
            console.log('doing onresize stuff');
        };

        window.addEventListener('scroll', function (event) {
            //doing stuff
            console.log('doing scroll stuff');
        });
...

哪个工作正常。但是，当我使用VueRouter和注销并离开/foo另一个组件时，当我在新组件上滚动和调整大小时/bar，我的控制台仍然被填充scroll和事件：resize/bar

doing scroll stuff
doing onresize stuff
doing scroll stuff
doing scroll stuff
doing scroll stuff

如何完全停止所有引用并/foo从内存中删除（？）上一页（），以免发生这种情况？

Answer 1

您可以使用removeEventListener

const handler = (event) => console.log(event)

export default {
  mounted() {
    window.addEventListener('scroll', handler)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', handler)
  }
}

W3schools有更多的例子。

如果你正在监听 DOM 上的事件，你可以使用 Vuev-on或@语法，例如@click. 在这种情况下，Vue 将为您处理事件侦听器。