>[danger]Vue：發布訂閱（如何實現發布訂閱） **發布-訂閱模式也叫做觀察者模式**。通過一對一或者一對多的依賴關系，當對象發生改變時，訂閱方都會收到通知。在現實生活中，也有很多類似場景，比如我需要在購物網站上購買一個產品，但是發現該產品目前處于缺貨狀態，這時候我可以點擊有貨通知的按鈕，讓網站在產品有貨的時候通過短信通知我。 在實際代碼中其實發布-訂閱模式也很常見，比如我們點擊一個按鈕觸發了點擊事件就是使用了該模式 ``` <ul id="ul"></ul> <script> let ul = document.querySelector('#ul') ul.addEventListener('click', (event) => { console.log(event.target); }) </script> ``` 在 Vue 中，如何實現響應式也是使用了該模式。對于需要實現響應式的對象來說，在`get`的時候會進行依賴收集，當改變了對象的屬性時，就會觸發派發更新。 --- 以下是如何實現發布-訂閱模式的例子 ``` class EventCenter{ ?// 1. 定義事件容器，用來裝事件數組 let handlers = {} ? ?// 2. 添加事件方法，參數：事件名 事件方法 ?addEventListener(type, handler) { ? ?// 創建新數組容器 ? ?if (!this.handlers[type]) { ? ? ?this.handlers[type] = [] ? } ? ?// 存入事件 ? ?this.handlers[type].push(handler) } ? ?// 3. 觸發事件，參數：事件名 事件參數 ?dispatchEvent(type, params) { ? ?// 若沒有注冊該事件則拋出錯誤 ? ?if (!this.handlers[type]) { ? ? ?return new Error('該事件未注冊') ? } ? ?// 觸發事件 ? ?this.handlers[type].forEach(handler => { ? ? ?handler(...params) ? }) } ? ?// 4. 事件移除，參數：事件名 要刪除事件，若無第二個參數則刪除該事件的訂閱和發布 ?removeEventListener(type, handler) { ? ?if (!this.handlers[type]) { ? ? ?return new Error('事件無效') ? } ? ?if (!handler) { ? ? ?// 移除事件 ? ? ?delete this.handlers[type] ? } else { ? ? ?const index = this.handlers[type].findIndex(el => el === handler) ? ? ?if (index === -1) { ? ? ? ?return new Error('無該綁定事件') ? ? } ? ? ?// 移除事件 ? ? ?this.handlers[type].splice(index, 1) ? ? ?if (this.handlers[type].length === 0) { ? ? ? ?delete this.handlers[type] ? ? } ? } } } ```