Vue reactivity -- это встроенный Observer. Но бывают ситуации, когда реактивности недостаточно: события между несвязанными модулями, уведомления из WebSocket, плагинная архитектура. Тогда строишь явный Observer/EventEmitter. **Типизированный EventEmitter:** ```typescript // utils/eventBus.ts type EventHandler = (payload: T) => void interface EventMap { 'user:login': { userId: string; name: string } 'user:logout': void 'notification:new': { message: string; type: 'info' | 'error' } 'cart:updated': { itemCount: number } } class TypedEventBus { private listeners = new Map>() on(event: K, handler: EventHandler) { if (!this.listeners.has(event)) { this.listeners.set(event, new Set()) } this.listeners.get(event)!.add(handler as EventHandler) // Возвращаем функцию отписки return () => this.off(event, handler) } off(event: K, handler: EventHandler) { this.listeners.get(event)?.delete(handler as EventHandler) } emit(event: K, payload: EventMap[K]) { this.listeners.get(event)?.forEach(handler => handler(payload)) } once(event: K, handler: EventHandler) { const wrapper: EventHandler = (payload) => { handler(payload) this.off(event, wrapper) } this.on(event, wrapper) } } export const eventBus = new TypedEventBus() ``` **Composable для автоматической отписки:** ```javascript // composables/useEventBus.js import { onUnmounted } from 'vue' import { eventBus } from '@/utils/eventBus' export function useEventBus() { const unsubscribers = [] function on(event, handler) { const unsub = eventBus.on(event, handler) unsubscribers.push(unsub) return unsub } function emit(event, payload) { eventBus.emit(event, payload) } // Автоматическая очистка при unmount onUnmounted(() => { unsubscribers.forEach(unsub => unsub()) }) return { on, emit } } ``` **Использование в компонентах:** ```vue ``` ```vue ``` ```vue ``` **Reactive Observer через watchEffect (продвинутый):** ```javascript // composables/useReactiveObserver.js import { ref, watchEffect, onUnmounted } from 'vue' export function createObservableStore(initialState) { const state = ref(initialState) const subscribers = new Map() // Подписка на конкретное поле с селектором function subscribe(selector, callback) { const id = Symbol() const stopWatch = watchEffect(() => { const value = selector(state.value) callback(value) }) subscribers.set(id, stopWatch) return () => { stopWatch() subscribers.delete(id) } } function setState(updater) { if (typeof updater === 'function') { state.value = updater(state.value) } else { state.value = updater } } return { state, subscribe, setState } } // Использование const userStore = createObservableStore({ name: '', role: 'guest', theme: 'light' }) // Подписка только на изменение role userStore.subscribe( (s) => s.role, (role) => console.log('Role changed:', role) ) ``` ## 📌 Реальные кейсы - **WebSocket-события** -- сервер шлёт события, event bus раздаёт их заинтересованным компонентам - **Плагинная система** -- плагины подписываются на хуки приложения через event bus - **Кросс-модульная коммуникация** -- модуль корзины уведомляет модуль аналитики о покупке, не зная о его существовании - **Feature flags** -- изменение флага триггерит перерендер всех зависимых компонентов ## Частые ошибки ```javascript // ❌ Забыть отписаться -- утечка памяти eventBus.on('event', handler) // при unmount слушатель остаётся // ✅ Автоматическая очистка через composable const { on } = useEventBus() on('event', handler) // отпишется при unmount ``` ```javascript // ❌ Event bus как замена props/emit -- спагетти // Родитель и потомок общаются через event bus вместо props // ✅ Event bus -- для несвязанных модулей. Для parent-child -- props/emit ``` ```javascript // ❌ Хранение состояния в event bus eventBus.lastUser = user // bus не для этого // ✅ Состояние в store/composable, события -- в bus userStore.setUser(user) eventBus.emit('user:login', user) ``` ## Резюме Vue reactivity -- уже Observer Pattern. Для случаев, где реактивных связей недостаточно (кросс-модульные события, WebSocket, плагины), строй типизированный EventEmitter. Оборачивай подписки в composable с автоматической отпиской при unmount. Не используй event bus для parent-child коммуникации -- для этого есть props/emit. Event bus -- для decoupled модулей, которые не должны знать друг о друге. ---

Как реализовать Observer Pattern с Vue reactivity?