vue自定义事件本身不导致内存泄漏，但$on/$off使用不当会引发重复监听、闭包强引用等问题；需确保绑定可追踪、解绑可匹配、时机准确，并避免全局eventbus滥用。
Vue 自定义事件本身不会直接导致内存泄漏，但不当使用 $on 和 $off 会引发重复监听、闭包强引用、组件实例无法回收等问题。关键在于“绑定要可追踪，解绑要可匹配，时机要准确”。
确保 $on 和 $off 使用同一函数引用
用箭头函数或匿名函数绑定事件，会导致 $off 无法匹配移除，形成残留监听器：
- ❌ 错误写法（每次都是新函数）：
this.$bus.$on('data-updated', (payload) => { this.list = payload; }); - ✅ 正确写法（显式声明并复用）：
this.handleDataUpdated = (payload) => { this.list = payload; };
this.$bus.$on('data-updated', this.handleDataUpdated); - 在
beforeUnmount中必须配对调用：
this.$bus.$off('data-updated', this.handleDataUpdated);
避免全局事件总线滥用
将 Vue.prototype.$bus = new Vue() 作为全局 EventBus 是高风险做法。一旦监听未清理，所有挂载过的组件实例都会被长期持有。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 推荐改用局部事件总线：在组件内创建独立
const bus = new Vue()，生命周期内自管理； - 或升级为 mitt / tiny-emitter 等无状态轻量库，不依赖 Vue 实例，天然规避 GC 阻碍；
- 更现代的替代方案：用 provide/inject + reactive 对象封装事件触发逻辑，避免跨组件强引用。
监听逻辑需与组件生命周期严格对齐
监听注册不能只靠 mounted 或 created，而要确保销毁动作落在 beforeUnmount（Vue 3）或 beforeDestroy（Vue 2），且执行顺序可靠。
- 不要在
watch或异步回调中动态$on，除非你同步记录并管理该监听句柄； - 若监听来自子组件通信（如
this.$parent.$on），务必在父组件中统一维护监听列表，并在自身卸载前批量清理； - 可封装一个 mixin 或 composable（Vue 3）自动绑定/解绑，例如：
useEventBus(bus, 'msg', handler)，内部自动注册并返回清理函数。
检测是否已重复监听
开发阶段可通过以下方式快速验证：
- 在事件触发回调中打印日志，反复挂载/卸载组件，观察日志是否成倍增长；
- 用 Chrome Memory 面板拍 Heap Snapshot，筛选
VueComponent，查看 Retainers 是否包含VueEventEmitter及其 listener 数量； - 在 EventBus 实例上临时打补丁，统计各事件名的监听数：
const originalOn = bus.$on;
bus.$on = function(event, fn) { console.warn(`[BUS] $on ${event} → ${fn.name || 'anon'}`); return originalOn.call(this, event, fn); };
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
