uni-app如何实现小程序端的全局事件总线防内存泄漏

夜杰大大_3885

夜杰大大_3885

2026-07-02

761人浏览

原创

uni.$on 必须配 uni.$off 且仅在 onunload 中调用,否则导致内存泄漏;需保存回调引用、避免重复注册;推荐使用自建 eventbus 替代,确保跨平台一致性与类型安全。

uni-app如何实现小程序端的全局事件总线防内存泄漏

直接用 uni.$on + uni.$emit 不加清理,小程序端必 leak —— 页面跳走后监听器还在,回调里闭包持有的 this、data、refs 全部无法回收,真机跑两三个页面切换就明显卡顿。

uni.$on 必须配 uni.$off,且只能在 onUnload 里调用

小程序页面生命周期中,onUnload 是唯一可靠卸载时机;onHide 或 beforeDestroy 在小程序平台不触发或不可靠,尤其 tab 切换时 beforeDestroy 根本不执行。

  • uni.$on 注册监听必须保存回调引用,不能传匿名函数(否则 uni.$off 无法精准移除)
  • 推荐写法:const handleLogin = (data) => { ... }; → uni.$on('login', handleLogin) → uni.$off('login', handleLogin)
  • 多个事件共用一个回调?不行。每个 uni.$on 都要单独 uni.$off,否则残留

跨页面通信场景下,避免重复注册同一事件

比如 A 页面跳 B 页面,B 页面又跳 C,C 页面再 uni.$on('dataUpdate') —— 如果没清理,A、B、C 三个页面的监听器全堆在事件中心里,一次 uni.$emit('dataUpdate') 就触发三次。

uni-app
uni-app

uni-app 是基于 Vue 的跨端开发框架,适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载
  • 常见错误:在 onLoad 里无条件 uni.$on,没判断是否已注册
  • 稳妥做法:用标志位控制,或封装一层防重注册逻辑(但不如直接依赖 onUnload 清理来得干净)
  • 注意:小程序端 uni.$on 不支持「覆盖式注册」,每次调用都新增监听器,不是替换

替代方案:纯 JS EventBus 更可控,但需手动管理生命周期

如果项目已用 TypeScript 或需要类型校验,建议弃用 uni.$on,改用自建 EventBus 工厂:

export class EventBus {
  private handlers: Record<string array>> = {}
  on(type: string, fn: Function) {
    if (!this.handlers[type]) this.handlers[type] = []
    this.handlers[type].push(fn)
  }
  emit(type: string, payload?: any) {
    this.handlers[type]?.forEach(fn => fn(payload))
  }
  off(type: string, fn?: Function) {
    if (!fn) {
      delete this.handlers[type]
      return
    }
    this.handlers[type] = this.handlers[type]?.filter(f => f !== fn) || []
  }
}</string>
  • 实例挂全局(如 globalThis.eventBus),所有页面 import 后直接用
  • 仍需在 onUnload 调 eventBus.off('xxx', callback),不写照样 leak
  • 优势:可加泛型、可单元测试、不依赖 uni-app 内部实现,H5/App 小程序行为一致

真正容易被忽略的点是:小程序没有组件级自动销毁机制,所有事件监听、定时器、蓝牙监听、WebSocket 连接,只要没显式 off/close/clearInterval,就永远活着 —— 它们不随页面隐藏而暂停,也不随路由跳转而释放。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

uni-app

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2483

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5363

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6410

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5998

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

863

5

Revel框架模板渲染与表单验证
Revel框架模板渲染与表单验证

本专题围绕Revel框架视图层开发,介绍模板语法、变量输出、布局复用、表单提交、参数绑定与验证规则,帮助开发者完成安全规范的页面交互。

2026.10.16

0

15

Revel框架MVC路由与控制器
Revel框架MVC路由与控制器

本专题聚焦Revel框架MVC核心机制,讲解路由定义、控制器Action、参数绑定、请求响应和反向路由,并结合常见场景梳理接口请求处理流程。

2026.10.16

0

15

Revel框架入门与安装配置
Revel框架入门与安装配置

本专题从Revel框架环境搭建讲起,系统介绍命令行工具安装、项目创建、目录结构、配置文件及热代码重载,帮助开发者快速完成首个Go Web应用。

2026.10.16

0

15

Linux 新手先学哪些命令
Linux 新手先学哪些命令

Linux新手命令专题汇集终端基础、文件目录操作、文本查看、软件安装和权限管理等入门文章,帮助按实际任务练习常用命令并建立命令行操作习惯。

2026.10.15

0

20

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习