能直接用，但需确认HBuilderX版本及配置是否支持；若uni.$emit为undefined，Vue2需在main.js导入挂载文件，Vue3须通过app.config.globalProperties挂载；EventBus不可用new Vue()，应手写纯JS对象实现，且on/off必须传同一函数引用，页面卸载时务必清理监听。
uni.$emit / uni.$on 能不能直接用？
能，但得先确认环境是否支持——uni.$emit 在部分旧版 HBuilderX 或未开启 vue.config.js 配置的项目里根本不存在，调用会直接报 TypeError: uni.$emit is not a function。不是代码写错了，是运行时没挂载。
检查方法：在任意页面的 onLoad 里打印 console.log(uni.$emit)，如果是 undefined，就得手动启用或换方案。
启用方式（Vue 2 项目）：
在 main.js 中加一行：import './utils/uni-emitter'，该文件需显式调用 uni.$emit = ... 挂载；
Vue 3（uni-app 3.0+）必须走 app.config.globalProperties，Vue.prototype 已失效。
EventBus 实例必须自己 new 吗？
必须。别照搬 Vue 2 项目里 export default new Vue() 的写法——uni-app 中 new Vue() 创建的实例会和页面生命周期错位，导致监听器残留、事件丢失、H5 正常但小程序不触发等跨平台问题。
正确做法是用纯 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
关键点：
-
on/off必须传同一个函数引用，不能用箭头函数或匿名函数 - 导出后在页面中
import EventBus from '@/utils/event-bus.js'显式引入，避免模块缓存导致多次初始化 - 不要挂到
Vue.prototype或app.config.globalProperties上——它不是 Vue 实例，挂了反而失效
页面卸载时忘记 off 会怎样？
同一事件监听被重复绑定，返回该页面时回调执行多次。典型场景：列表页 A → 详情页 B → 编辑页 C，C 返回 B 后再回 A，A 的 onLoad 里又 EventBus.on('data-updated', ...) 一次，但没 off，下次再进 A 就绑了两次。
解决方案：
- 非 tabbar 页面：在
onUnload中调用EventBus.off('xxx', handler) - tabbar 页面：改用
onHide/onShow控制，因为onUnload不一定触发 - Composition API（
setup）中，handler必须声明为ref或let变量，确保on和off用的是同一个引用
为什么推荐优先用 Pinia 而不是 EventBus？
EventBus 本质是“广播式”通信，适合松耦合的一次性通知（如登录成功刷新头像），但不适合状态同步——比如多个页面都要响应“购物车数量变更”，靠 emit + 手动更新 data 容易漏掉、时序错乱、难以调试。
Pinia 是响应式状态管理，天然支持跨页面共享、持久化、devtools 调试，且无内存泄漏风险。复杂业务中，把“要传的参”变成“可订阅的状态”，比满地 $on 更可控。
简单说：传一个编辑结果用 EventBus 没问题；传一堆关联状态、还要支持离线缓存、多端同步，就该切到 Pinia。
