微前端子应用卸载后事件监听器没清除怎么办？

梦雅 ☘︎ 提问于 2026-03-01 13:10:21 阅读 6

前端

我在用 qiankun 搭建微前端项目，子应用卸载时发现之前绑定的全局事件监听器还在，导致内存泄漏。明明在 unmount 里写了 removeEventListener，但好像没生效。

比如下面这段代码，在子应用 mount 时加了 resize 监听，卸载时也调用了移除，但切换应用几次后，控制台还是会多次打印日志：

let resizeHandler = null;

export async function mount() {
  resizeHandler = () => console.log('resized!');
  window.addEventListener('resize', resizeHandler);
}

export async function unmount() {
  window.removeEventListener('resize', resizeHandler);
}

应用卸载

我来解答赞 2 收藏

反馈

1 条解答

书生シ迁迁 Lv1

检查一下是不是多次 mount 导致的，每次 mount 都会创建新的 handler，但变量只存了最后一个引用，之前的监听器就丢掉了。

let resizeHandler = null;



export async function mount() {

  // 防止重复绑定，先清理旧的

  if (resizeHandler) {

    window.removeEventListener('resize', resizeHandler);

  }

  resizeHandler = () => console.log('resized!');

  window.addEventListener('resize', resizeHandler);

}



export async function unmount() {

  if (resizeHandler) {

    window.removeEventListener('resize', resizeHandler);

    resizeHandler = null; // 清空引用，防止内存泄漏

  }

}

还有个坑，如果你用了 webpack 的热更新，模块会被重复加载导致 resizeHandler 被重置为 null，旧的监听器就再也找不回了。开发环境记得刷新页面测试，或者干脆用事件委托的方式处理。

2026-03-01 13:12