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

Question

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

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 上的事件，你可以使用 Vue 的 v-on 或 @ 语法，例如@click。在这种情况下，Vue 将为您处理事件侦听器。

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

Completely delete references to previous Vue component when I navigate away

javascript

single-page-application

vue.js

vue-router

vuejs2