uni.$on/uni.$emit是uni-app小程序端唯一真正跨页面的全局事件机制，基于纯js对象维护映射表，全平台一致生效；必须成对使用并在onunload或onhide中精准调用uni.$off清理，否则导致内存泄漏和重复触发。
uni.$on/uni.$emit 是小程序端唯一跨页面的全局事件机制
uni-app 小程序端没有 DOM 全局事件代理能力，uni.$on 和 uni.$emit 是官方提供的、唯一能穿透页面生命周期的事件总线，全平台（包括微信/支付宝/百度小程序）一致生效。它不依赖 Vue 实例，底层是纯 JS 对象维护的映射表，因此比手写 EventBus 更轻量、更可靠。
但直接用容易踩坑：比如在 onLoad 里 uni.$on('login', cb)，却没在 onUnload 里调用 uni.$off('login', cb)，会导致回调函数一直驻留内存，页面反复进入时还会叠加监听 —— 同一个事件触发多次回调，UI 闪动、数据错乱、内存持续上涨。
- 必须手动配对使用：
uni.$on和uni.$off的回调函数引用要完全一致（不能用箭头函数、不能匿名） - tabbar 页面不会触发
onUnload，得改用onHide/onShow控制绑定/解绑 -
uni.$off()不传参数会清空全部事件，慎用；只传事件名会清空该事件所有监听器，也不推荐
手写 EventBus 必须避开 Vue 实例，且要支持跨平台时序
如果你需要 TypeScript 类型约束、事件名枚举、或统一管理事件生命周期，就得自己封装 EventBus。但绝不能用 new Vue() 或挂到 Vue.prototype 上 —— 小程序环境里 Vue 构造函数初始化时机不稳定，this.$bus 很可能为 undefined。
正确做法是导出一个纯 JS 对象，所有方法都用普通函数声明（避免箭头函数导致 this 指向丢失），并在每个页面中显式 import EventBus from '@/utils/event-bus.js'：
const EventBus = {
events: {},
on(event, callback) {
if (!this.events[event]) this.events[event] = []
this.events[event].push(callback)
},
emit(event, args) {
if (this.events[event]) {
this.events[event].forEach(cb => cb(args))
}
},
off(event, callback) {
if (!callback) {
delete this.events[event]
return
}
if (this.events[event]) {
this.events[event] = this.events[event].filter(cb => cb !== callback)
}
}
}
export default EventBus
- 在
onLoad中绑定，在onUnload（非 tabbar）或onHide（tabbar）中解绑 - 回调函数必须是具名函数或
ref变量（Composition API 下），确保on和off传的是同一个引用 - 不要在
mounted或onReady中绑定 —— 小程序页面生命周期里这些钩子不一定触发，onLoad最稳妥
蓝牙、定位、扫码等原生 API 的事件监听必须走 EventBus 中转
像 uni.onBluetoothDeviceFound、uni.onLocationChange 这类原生 API，每次调用都会新增监听器，且页面跳转后不会自动销毁。如果直接在页面里注册，极易造成监听器堆积、重复触发、内存泄漏。
正确姿势是：统一在 App.vue 或某个常驻页面（如首页）中注册一次原生监听，再通过 uni.$emit 或自定义 EventBus 转发给业务页面：
// App.vue 中统一监听
onLaunch() {
uni.onBluetoothDeviceFound(res => {
// 过滤重复设备逻辑放这里
const device = res.devices[0]
if (!this.seenDevices.has(device.deviceId)) {
this.seenDevices.add(device.deviceId)
uni.$emit('bluetooth-device-found', device)
}
})
}
- 原生监听只注册一次，避免多页面重复调用
uni.onXXX - 去重、节流、格式转换等预处理逻辑放在中转层，业务页面只消费干净数据
- 中转层本身也要注意内存：App.vue 的
onUnload不会触发，所以原生监听器要在onHide时暂停、onShow时恢复，或用条件开关控制
类型安全与重构成本是中大型项目绕不开的坎
原始 uni.$on('user-login', data => {...}) 写法里，data 是 any 类型，字段拼错、结构变更都只能运行时报错。EventBus 工厂函数加泛型就能解决：
type Events = {
'user-login': { uid: string; token: string };
'order-updated': { orderId: string; status: 'paid' | 'shipped' };
}
class EventBus<e extends events> { ... }</e>
但这要求所有事件名提前约定、集中管理。一旦漏写 off，或者用错事件名字符串，TypeScript 也救不了你。
- 事件名建议用常量对象或 enum 统一导出，禁止硬编码字符串
- 每个页面的
onUnload里必须有对应uni.$off或EventBus.off，最好写成可复用的 mixin 或 composable - 真机调试时重点观察内存趋势：连续跳转 5 次同一页，若内存不回落，基本就是事件没解绑
onUnload 里写那行 uni.$off —— 它不报错、不警告，只在用户连用三天后让小程序卡死。
