使用removeEventListener移除window resize事件触发TypeError问题求助

针对你遇到的removeEventListener参数报错问题，以下是具体排查方向和解决方法：

1. 确保函数引用完全一致 #

如果直接使用this.handleResize，可能因为函数绑定上下文的变化，导致添加监听和移除监听时用的不是同一个函数实例。解决办法是把绑定后的函数存为组件实例属性，保证两次调用用同一个引用：

mounted() {
  // 将绑定上下文后的函数存到实例上
  this._resizeHandler = this.handleResize.bind(this);
  window.addEventListener("resize", this._resizeHandler);
},
beforeDestroy() {
  window.removeEventListener("resize", this._resizeHandler);
  // 清理引用避免内存泄漏
  delete this._resizeHandler;
}

2. 更换生命周期钩子 #

destroyed钩子触发时，Vue已经开始回收组件实例的部分属性，可能导致this.handleResize无法正常获取。改用beforeDestroy钩子，此时组件仍处于活跃状态，能稳定访问方法。

3. 检查方法定义正确性 #

确保handleResize是定义在组件的methods选项中，避免用箭头函数定义方法（箭头函数会改变this指向，虽不会直接引发参数错误，但可能导致其他逻辑问题）：

methods: {
  handleResize() {
    // 你的resize处理逻辑
  }
}

排查小技巧 #

在钩子中打印this.handleResize，确认它是一个有效函数而非undefined：

beforeDestroy() {
  console.log(this.handleResize); // 正常应输出函数体
  window.removeEventListener("resize", this.handleResize);
}

如果打印结果为undefined，说明方法未正确绑定到组件实例，需检查方法定义和组件结构。

内容的提问来源于stack exchange，提问作者EndlessDev-BBQ