Vue3.x 推薦使用 mitt.js

Vue2.x 使用 EventBus 進行組件通訊，而 Vue3.x 推薦使用 mitt.js。

比起 Vue 實例上的 EventBus，mitt.js 好在哪裏呢？首先它足夠小，僅有200bytes，其次支持所有事件的監聽和批量移除，它還不依賴 Vue 實例，因此能夠跨框架使用，React 或者 Vue，甚至 jQuery 項目都能使用同一套庫。

快速開始

npm install --save mitt
複製代碼

方式1，全局總線，vue 入口文件 main.js 中掛載全局屬性。

import { createApp } from 'vue';
import App from './App.vue';
import mitt from "mitt"

const app = createApp(App)
app.config.globalProperties.$mybus = mitt()
複製代碼

方式2，封裝自定義事務總線文件 mybus.js，建立新的 js 文件，在任何你想使用的地方導入便可。

import mitt from 'mitt'
export default mitt()
複製代碼

方式3，直接在組件裏面導入使用。推薦你們使用這種方式，由於分散式更方便管理和排查問題。

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>

<script> import mitt from 'mitt' import HelloWorld from './components/HelloWorld.vue' export default { components: { HelloWorld }, setup (props) { const formItemMitt = mitt() return { formItemMitt } } } </script>
複製代碼

使用方式

其實 mitt 的用法和 EventEmitter 相似，經過 on 方法添加事件，off 方法移除，clear 清空全部。

import mitt from 'mitt'

const emitter = mitt()

// listen to an event
emitter.on('foo', e => console.log('foo', e) )

// listen to all events
emitter.on('*', (type, e) => console.log(type, e) )

// fire an event
emitter.emit('foo', { a: 'b' })

// clearing all events
emitter.all.clear()

// working with handler references:
function onFoo() {}
emitter.on('foo', onFoo)   // listen
emitter.off('foo', onFoo)  // unlisten
複製代碼

須要注意的是，導入的 mitt 咱們是經過函數調用的形式，不是 new 的方式。在移除事件的須要傳入定義事件的名字和引用的函數。

核心原理

原理很簡單，就是經過 map 的方法保存函數。通過個人刪減代碼不到 30 行。

export default function mitt(all) {
	all = all || new Map();

	return {
		all,

		on(type, handler) {
			const handlers = all.get(type);
			const added = handlers && handlers.push(handler);
			if (!added) {
				all.set(type, [handler]);
			}
		},

		off(type, handler) {
			const handlers = all.get(type);
			if (handlers) {
				handlers.splice(handlers.indexOf(handler) >>> 0, 1);
			}
		},

		emit(type, evt) {
			((all.get(type) || [])).slice().map((handler) => { handler(evt); });
			((all.get('*') || [])).slice().map((handler) => { handler(type, evt); });
		}
	};
}
複製代碼

Vue3 從實例中徹底刪除了 $on、$off 和 $once 方法。$emit 仍然是現有API的一部分，由於它用於觸發由父組件以聲明方式附加的事件。