簡介
Mitt 是一個輕量級的事件發射器庫，體積小巧（約 200 字節），無依賴，支持 TypeScript。它提供了簡單而強大的事件發布/訂閱機制，適用于組件間通信、狀態管理等場景。
特點
- 🚀 超輕量級（~200 bytes）
- 🔧 無依賴
- 📝 TypeScript 支持
- 🎯 簡單易用的 API
- 🛡? 類型安全
安裝
npm install mitt基本用法
創建事件發射器
import mitt from "mitt";// 創建事件發射器實例
const emitter = mitt();// 或者指定事件類型
type Events = {foo: string;bar: number;baz: void;
};const typedEmitter = mitt<Events>();監聽事件
// 監聽單個事件
emitter.on("foo", (data) => {console.log("收到 foo 事件:", data);
});// 監聽多個事件
emitter.on("bar", (data) => {console.log("收到 bar 事件:", data);
});// 使用通配符監聽所有事件
emitter.on("*", (type, data) => {console.log(`事件類型: ${type}, 數據:`, data);
});發射事件
// 發射事件（無數據）
emitter.emit("baz");// 發射事件（帶數據）
emitter.emit("foo", "hello world");
emitter.emit("bar", 42);移除監聽器
// 移除特定事件的監聽器
emitter.off("foo");// 移除所有監聽器
emitter.all.clear();// 移除特定監聽器（需要保存引用）
const handler = (data: string) => console.log(data);
emitter.on("foo", handler);
emitter.off("foo", handler);API 詳解
mitt()
創建一個新的事件發射器實例。
const emitter = mitt<Events>();emitter.on(type, handler)
注冊事件監聽器。
參數：
type: 事件類型（字符串或通配符 ‘*’）handler: 事件處理函數
返回值：?無
emitter.on("message", (data: string) => {console.log("收到消息:", data);
});emitter.off(type, handler?)
移除事件監聽器。
參數：
type: 事件類型handler: 可選的特定處理函數
返回值：?無
// 移除所有 'message' 事件的監聽器
emitter.off("message");// 移除特定的監聽器
const handler = (data: string) => console.log(data);
emitter.off("message", handler);emitter.emit(type, data?)
發射事件。
參數：
type: 事件類型data: 可選的事件數據
返回值：?無
emitter.emit("message", "Hello World");
emitter.emit("notification");emitter.all
獲取所有注冊的事件監聽器。
// 查看所有事件類型
console.log(Object.keys(emitter.all));// 清空所有監聽器
emitter.all.clear();高級特性
通配符監聽
// 監聽所有事件
emitter.on("*", (type, data) => {console.log(`事件 ${type} 被觸發:`, data);
});// 通配符監聽器會收到事件類型作為第一個參數
emitter.emit("foo", "bar");
// 輸出: 事件 foo 被觸發: bar鏈式調用
// 支持鏈式調用
emitter.on("event1", () => console.log("event1")).on("event2", () => console.log("event2")).emit("event1");常見用例
React 組件間通信
// 創建全局事件發射器
export const globalEmitter = mitt<{themeChange: "light" | "dark";userUpdate: { id: string; name: string };
}>();// 在組件中使用
function ThemeToggle() {const toggleTheme = () => {globalEmitter.emit("themeChange", "dark");};return <button onClick={toggleTheme}>切換主題</button>;
}function UserProfile() {useEffect(() => {const handler = (user: { id: string; name: string }) => {console.log("用戶信息更新:", user);};globalEmitter.on("userUpdate", handler);return () => globalEmitter.off("userUpdate", handler);}, []);return <div>用戶資料</div>;
}Vue 3 組合式 API
// composables/useEventBus.ts
import mitt from "mitt";
import { onUnmounted } from "vue";export const eventBus = mitt();export function useEventBus() {const handlers: Array<() => void> = [];const on = (event: string, handler: Function) => {eventBus.on(event, handler);handlers.push(() => eventBus.off(event, handler));};const emit = (event: string, data?: any) => {eventBus.emit(event, data);};onUnmounted(() => {handlers.forEach((cleanup) => cleanup());});return { on, emit };
}// 在組件中使用
export default {setup() {const { on, emit } = useEventBus();on("message", (data: string) => {console.log("收到消息:", data);});const sendMessage = () => {emit("message", "Hello from component");};return { sendMessage };},
};注意事項
內存泄漏
- 始終在組件卸載時清理事件監聽器
- 使用?
emitter.all.clear()?清空所有監聽器 - 保存處理函數引用以便精確移除
事件循環
- 避免在事件處理函數中發射相同事件
- 使用防抖或節流處理高頻事件
- 考慮使用?
setTimeout?或?setImmediate?延遲事件發射
調試技巧
// 開發環境下的調試輔助
if (process.env.NODE_ENV === "development") {const originalEmit = emitter.emit;emitter.emit = (type, data) => {console.log(`[Event] ${type}:`, data);originalEmit.call(emitter, type, data);};
}Mitt 是一個簡單而強大的事件發射器，通過合理使用可以大大簡化組件間通信和狀態管理。掌握這些用法和最佳實踐，將幫助您構建更加健壯和可維護的應用程序。
?Mitt 事件發射器完全指南：200字節的輕量級解決方案 - 高質量源碼分享平臺-免費下載各類網站源碼與模板及前沿技術分享
