解决Vue中window resize事件监听与移除失效问题

作者：山岚

时间：2026-10-23

本文针对Vue项目中监听window resize事件时，页面切换后移除监听失效导致内存泄漏的问题，分析了常见错误写法。重点讲解了如何通过保存方法引用正确移除监听，以及在使用lodash debounce时，因箭头函数导致this指向错误及监听无法正确移除的解决方案，确保组件销毁时资源释放。

文章目录

Vue中window resize监听移除失效问题

在Vue项目中，有时需要监听window窗口大小的变化来实时计算图片高度，因此会添加一个监听事件。虽然能够成功监听到窗口变化，但在离开当前页面并进入其他页面后，即使改变窗口大小，发现window仍处于监听状态，即移除监听事件并未生效。


  //之前的写法，这样写移除监听事件无效
  mounted(){
    window.addEventListener('resize',()=>{
      '改变窗口大小时需要做的处理'
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize");
  }

经过查阅相关资料，发现采用特定的写法可以正确移除监听事件。

正确移除监听事件的写法


  methods: {
    listenResize(){
      '窗口大小改变时的操作'
    }
  },
  mounted(){
    window.addEventListener('resize',this.listenResize); 
  },
  beforeDestroy() {
    window.removeEventListener("resize",this.listenResize);
  }

补充知识：Vue监听屏幕变化及销毁监听事件的方法。

记录一次遇到的技术小坑。

由于使用了ECharts并需要其自适应屏幕大小，因此在Vue中使用了监听事件。考虑到性能问题，使用了lodash库的debounce函数进行包裹。代码如下：

使用debounce时的常见错误


mounted() {
  window.addEventListener('resize', debounce(this.resize,200), true)
},
beforeDestroy() {
  window.removeEventListener('resize', this.resize, true)
},
methods: {
  resize() {
   this.radarChart.resize()
  }
}

然而发现切换到其他页面时，屏幕改变仍会触发resize事件。由于之前写过类似功能，代码逻辑看似没有问题，但实际却会触发，这让人感到奇怪。经过研究，发现如果在addEventListener的方法中不加debounce，就可以正常移除监听。如下：

debounce的正确使用方式


mounted() {
  window.addEventListener('resize', this.resize, true)
},
beforeDestroy() {
  window.removeEventListener('resize', this.resize, true)
},
methods: {
  resize: debounce(function() {
   this.radarChart.resize()
  }, 300),
 }

debounce函数需要定义在methods中。并且内部函数体不能使用箭头函数，否则会导致this为undefined的错误。

以上这篇解决Vue给window添加和移除resize事件遇到的坑就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。