一文详解mitt和bus有什么区别

前言

之前没太关注过组件之间的数据传递问题，一般做项目如果是Vue2.x版本，直接用Vuex。

如果是Vue3.x版本，直接用Pinia。基本上很少用Bus(事件总线)，也没太关注过其他方案。

问题

最近做一个不大不小的项目，本来想着直接用 Pinia 了，但是页面有点儿少，用 Pinia 感觉有点儿杀鸡用牛刀。

所以就选择用 props 传值的方式，但是兄弟组件的传值害惨我了。

遂看一下网上的方案，兄弟组件的传值大概有三种手段：

1. 最传统的 Props 传值的方案。
2. 简单粗暴的 Bus 事件总线方案。
3. 封装好的库 Mitt 传参方案。

Props方案

最为传统的传参方案，父子组件之间传参非常好用。封装组件也是相当哇塞，但是在兄弟组件之间传参太过复杂。

尤其是从 A 组件的子组件 A1 上，传递参数到 B 组件的子组件 B1 上。层层转发。

写起来太过麻烦，而且用起来也不方便，每改一个参数需要四个组件同时修改。

Bus方案

我个人在团队内部不喜欢大家使用 Bus ，原因很简单，不易维护。

定义的 Bus 如果在好几个地方使用很难得到有效的控制，出现问题也很难快速定位。

并且我发现好几个小兄弟在写 Bus 的时候都忘记使用 $off 移除监听了，很容易造成应用内存泄漏。

另外就是在开发过程中 VsCode 和 WebStorm 是不支持通过 ctrl + 点击 寻找对应方法的，开发体验也一般情况。

最最重要的是，在Vue3.x版本中已经正式移除了 Bus 的API。

Mitt方案

Mitt这个方案我目前在正式的项目中还没用过，只是简单在几个Demo中尝试用了用。

怎么说呢，非常简洁！

一共就三个方法：

import mitt from 'mitt'
const emitter = mitt();
// 发送事件
emitter.emit('custom-event', 'Hello from A')
// 接收事件
emitter.on('custom-event', handler)
// 移除事件
emitter.off('custom-event', handler)

能看得到的优点：小(200多kb)、无依赖、Ts友好，但是缺点也同样明显：

• 创建的事件全局共享，可能存在事件名冲突。
• 需要手动调用 off 移除监听。
• 调试追踪困难
• 异步问题

Mitt和Bus的区别

看Mitt的缺点和Bus的缺点几乎一致，那么他俩到底有区别嘛？

还是说尤老师看到现成的直接对这部分代码不重写了？😂

先说答案：Mitt和Bus是存在本质性区别的。

原理不同

Mitt是一个独立的Js库，无任何相关依赖，在任何环境都可以使用。Vue、React、原生Js等都能用。

在Mitt的内部手动维护了一个事件的映射表Map<string, Function[]>。

而Bus依赖于Vue2.x的内部API，其原理上是基于Vue的观察者模式。

使用不同

虽然他们大部分的用法非常相似，比如说事件发送，一个用 $emit，一个用 emit()。

但是也存在很多区别。

Bus 不支持通配符监听，而 mitt 可以通过 mitt.on('*', ()=>{}) 的方式实现通配符的监听。

并且 mitt 支持Ts，这是最关键的。毕竟现在绝大多数的新应用在开发的时候都要求使用Ts。

总结

如果是老项目，我仍然推荐原来用啥就用啥。

如果是新项目，并且上了Vue3.x版本，那么你除了mitt恐怕没有别的选择(小项目)。Vue3.x 版本移除了 Bus！

另外需要强调的是 mitt 是临时通信，也就是说它只是一个临时方案。如果你所在的是一个大项目，我劝你仍然稳妥的使用 Pinia。

到此这篇关于mitt和bus有什么区别的文章就介绍到这了,更多相关mitt和bus区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论