前言

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

如果是Vue3.x版本，直接用Pinia?；旧虾苌儆?code>Bus(事件總線)，也沒太關(guān)注過其他方案。

問題

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

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

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

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

Props方案

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

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

寫起來太過麻煩，而且用起來也不方便，每改一個參數(shù)需要四個組件同時修改。

Bus方案

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

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

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

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

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

Mitt方案

Mitt這個方案我目前在正式的項(xiàng)目中還沒用過，只是簡單在幾個Demo中嘗試用了用。

怎么說呢，非常簡潔！

一共就三個方法：

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)、無依賴、Ts友好，但是缺點(diǎn)也同樣明顯：

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

Mitt和Bus的區(qū)別

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

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

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

原理不同

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

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

而Bus依賴于Vue2.x的內(nèi)部API，其原理上是基于Vue的觀察者模式。

使用不同

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

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

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

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

總結(jié)

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

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

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

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

最新評論