来回切换标签页十几次后点一次按钮发出去的请求越来越多,控制台 Network 里同一接口重复出现,内存面板 detached DOM 数量一直涨。碰到这种情况,我一般先确认改动有没有真的生效。
原因不复杂,mitt 或 $bus 上注册的监听没在卸载时移除,旧组件实例被回调闭包留住,每次挂载又叠一层,页面看着正常,泄漏是累积的,越早处理越好。
「事件总线监听泄漏」相关的日志我一般连着看前后五分钟,单看一条报错经常判断不出是哪一步失败。改完顺手把文档补一句,省得下次自己重新推一遍。
const off = bus.on('refresh', handler);
onUnmounted(() => off());
监控和日志的时间要对上,时区不一致会多绕很大一圈。
具体做法是,注册时保存解绑函数,在卸载钩子里调用一次;回调写成具名函数,方便按同一个引用精确移除;能用 props 或状态库解决就别引入全局事件总线,少一个泄漏点。
最后用这个标准收尾,反复切换页面后点一次只发一个请求,detached 节点数量稳定不涨,内存也降回来。
