前言

之前沒(méi)太關(guān)注過(guò)組件之間的數(shù)據(jù)傳遞問(wèn)題，一般做項(xiàng)目如果是Vue2.x版本，直接用Vuex。

如果是Vue3.x版本，直接用Pinia。基本上很少用Bus(事件總線)，也沒(méi)太關(guān)注過(guò)其他方案。

問(wèn)題

最近做一個(gè)不大不小的項(xiàng)目，本來(lái)想著直接用 Pinia 了，但是頁(yè)面有點(diǎn)兒少，用 Pinia 感覺(jué)有點(diǎn)兒殺雞用牛刀。

所以就選擇用 props 傳值的方式，但是兄弟組件的傳值害慘我了。

遂看一下網(wǎng)上的方案，兄弟組件的傳值大概有三種手段：

1. 最傳統(tǒng)的 Props 傳值的方案。
2. 簡(jiǎn)單粗暴的 Bus 事件總線方案。
3. 封裝好的庫(kù) Mitt 傳參方案。

Props方案

最為傳統(tǒng)的傳參方案，父子組件之間傳參非常好用。封裝組件也是相當(dāng)哇塞，但是在兄弟組件之間傳參太過(guò)復(fù)雜。

尤其是從 A 組件的子組件 A1 上，傳遞參數(shù)到 B 組件的子組件 B1 上。層層轉(zhuǎn)發(fā)。

寫(xiě)起來(lái)太過(guò)麻煩，而且用起來(lái)也不方便，每改一個(gè)參數(shù)需要四個(gè)組件同時(shí)修改。

Bus方案

我個(gè)人在團(tuán)隊(duì)內(nèi)部不喜歡大家使用 Bus ，原因很簡(jiǎn)單，不易維護(hù)。

定義的 Bus 如果在好幾個(gè)地方使用很難得到有效的控制，出現(xiàn)問(wèn)題也很難快速定位。

并且我發(fā)現(xiàn)好幾個(gè)小兄弟在寫(xiě) Bus 的時(shí)候都忘記使用 $off 移除監(jiān)聽(tīng)了，很容易造成應(yīng)用內(nèi)存泄漏。

另外就是在開(kāi)發(fā)過(guò)程中 VsCode 和 WebStorm 是不支持通過(guò) ctrl + 點(diǎn)擊 尋找對(duì)應(yīng)方法的，開(kāi)發(fā)體驗(yàn)也一般情況。

最最重要的是，在Vue3.x版本中已經(jīng)正式移除了 Bus 的API。

Mitt方案

Mitt這個(gè)方案我目前在正式的項(xiàng)目中還沒(méi)用過(guò)，只是簡(jiǎn)單在幾個(gè)Demo中嘗試用了用。

怎么說(shuō)呢，非常簡(jiǎn)潔！

一共就三個(gè)方法：

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

能看得到的優(yōu)點(diǎn)：小(200多kb)、無(wú)依賴(lài)、Ts友好，但是缺點(diǎn)也同樣明顯：

• 創(chuàng)建的事件全局共享，可能存在事件名沖突。
• 需要手動(dòng)調(diào)用 off 移除監(jiān)聽(tīng)。
• 調(diào)試追蹤困難
• 異步問(wèn)題

Mitt和Bus的區(qū)別

看Mitt的缺點(diǎn)和Bus的缺點(diǎn)幾乎一致，那么他倆到底有區(qū)別嘛？

還是說(shuō)尤老師看到現(xiàn)成的直接對(duì)這部分代碼不重寫(xiě)了？??

先說(shuō)答案：Mitt和Bus是存在本質(zhì)性區(qū)別的。

原理不同

Mitt是一個(gè)獨(dú)立的Js庫(kù)，無(wú)任何相關(guān)依賴(lài)，在任何環(huán)境都可以使用。Vue、React、原生Js等都能用。

在Mitt的內(nèi)部手動(dòng)維護(hù)了一個(gè)事件的映射表Map<string, Function[]>。

而B(niǎo)us依賴(lài)于Vue2.x的內(nèi)部API，其原理上是基于Vue的觀察者模式。

使用不同

雖然他們大部分的用法非常相似，比如說(shuō)事件發(fā)送，一個(gè)用 $emit，一個(gè)用 emit()。

但是也存在很多區(qū)別。

Bus 不支持通配符監(jiān)聽(tīng)，而 mitt 可以通過(guò) mitt.on('*', ()=>{}) 的方式實(shí)現(xiàn)通配符的監(jiān)聽(tīng)。

并且 mitt 支持Ts，這是最關(guān)鍵的。畢竟現(xiàn)在絕大多數(shù)的新應(yīng)用在開(kāi)發(fā)的時(shí)候都要求使用Ts。

總結(jié)

如果是老項(xiàng)目，我仍然推薦原來(lái)用啥就用啥。

如果是新項(xiàng)目，并且上了Vue3.x版本，那么你除了mitt恐怕沒(méi)有別的選擇(小項(xiàng)目)。Vue3.x 版本移除了 Bus！

另外需要強(qiáng)調(diào)的是 mitt 是臨時(shí)通信，也就是說(shuō)它只是一個(gè)臨時(shí)方案。如果你所在的是一個(gè)大項(xiàng)目，我勸你仍然穩(wěn)妥的使用 Pinia。

到此這篇關(guān)于mitt和bus有什么區(qū)別的文章就介紹到這了,更多相關(guān)mitt和bus區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論