中介者模式
當UI組件間存在復雜交互或多個組件需共享狀態時，中介者模式能集中管理事件分發和狀態更新，減少組件間的直接依賴，提升解耦性。
vue實現中介者模式
在Vue中實現中介者模式，你可以通過創建一個全局的事件中心（Event Bus）或者使用一個專門的庫如mitt、tiny-emitter等來實現。中介者模式主要用于減少組件之間的直接通信，通過一個中介者對象來處理不同組件之間的交互。下面，我將介紹如何在Vue中使用這兩種方式來實現中介者模式。
方法1：使用Vue的Event Bus
步驟1：創建Event Bus
首先，創建一個事件總線（Event Bus）文件，例如event-bus.js：
// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();
步驟2：在組件中使用Event Bus
然后在需要通信的組件中引入并使用這個Event Bus：
// ComponentA.vue
<template><div><button @click="sendData">Send Data</button></div>
</template><script>
import { EventBus } from './event-bus';export default {methods: {sendData() {EventBus.$emit('send-data', 'Hello from Component A');}}
}
</script>// ComponentB.vue
<template><div>Received: {{ message }}</div>
</template><script>
import { EventBus } from './event-bus';export default {data() {return {message: ''};},created() {EventBus.$on('send-data', (data) => {this.message = data;});}
}
</script>
Vue各種屬性控制不同的組件應該怎樣設計
觀察者模式
適用于需要組件間狀態監聽與響應的場景（如動態加載頁面內容、用戶行為觸發界面變化），通過訂閱-發布機制實現無侵入式更新。
策略模式
當UI邏輯涉及多種算法或規則（如不同交互反饋機制），可通過策略模式動態切換實現方式，避免硬編碼不同路徑的代碼分支。
迭代器模式
處理復雜數據結構（如嵌套列表、樹形菜單）時，通過迭代器逐步構建UI組件，降低遞歸調用復雜度，保持代碼結構清晰。
模板方法模式
針對重復性UI操作（如彈窗、提示框），通過模板方法定義通用流程框架，僅修改特定參數即可適應不同場景，減少重復代碼。
