自定义 hook 不是直接替代 props、emit 或 provide/inject 的通信机制，而是封装并增强通信逻辑的载体，用于统一管理状态共享、事件驱动通信、异步数据流联动及 dom 层协同，提升可靠性、可复用性与可测试性。
自定义 Hook 在 Vue.js 组件通信中不是直接替代 props、emit 或 provide/inject 的通信机制，而是封装并增强通信逻辑的载体。它不传递数据本身，但能统一管理状态来源、同步时机、副作用清理和跨组件行为协调，让通信更可靠、可复用、易测试。
封装响应式状态共享逻辑
当多个组件需读写同一份状态（如搜索关键词、用户偏好），又不想引入 Pinia 或逐层透传时，可用自定义 Hook 封装 reactive/ref + provide/inject 的组合：
- 在 Hook 内创建 sharedState = reactive({ keyword: '', theme: 'light' })
- 调用 provide('sharedConfig', { state: sharedState, update: (key, val) => { sharedState[key] = val } })
- 子组件通过 inject('sharedConfig') 获取，无需重复 defineInject 或类型声明
- 避免每个组件手动 setup provide/inject，降低出错率和冗余代码
统一处理事件驱动型通信
对于依赖全局事件（如 keyboard shortcut 触发菜单切换、resize 调整布局）的跨组件协作，Hook 可集中绑定与解绑：
- useGlobalEvent('keydown', handler) 内部自动 onMounted 添加监听、onUnmounted 清理
- 返回的 isActive 或 emit 方法可用于通知订阅组件，而非直接修改对方状态
- 相比在每个组件里写 window.addEventListener，Hook 确保事件不会重复绑定或遗漏移除
- 支持多监听器共存，例如 useGlobalEvent('keydown', handleCtrlS) 和 useGlobalEvent('keydown', handleEscape)
桥接异步数据流与组件间状态联动
当一个组件发起请求、另一个组件需响应结果（如列表页触发详情加载，详情页展示 loading/error/data），Hook 可抽象“发布-订阅”模式：
- useDataChannel() 返回 { send, subscribe }，底层用 ref 存储最新 payload，watchEffect 触发响应
- 发送方调用 send({ type: 'USER_DETAIL_LOADED', data: user })
- 接收方 subscribe('USER_DETAIL_LOADED', callback) 自动响应，且自动在 unmounted 时取消订阅
- 比手动 $emit/$on 更类型安全，也比直接共享 store 更轻量、边界清晰
配合自定义指令实现 DOM 层通信协同
某些通信发生在 DOM 层（如焦点管理、滚动同步），Hook 可与自定义指令配合形成闭环：
- useFocusGroup() 返回 focusNext()、focusPrev()、register(el) 等方法
- 搭配 v-focus-group 指令自动注册元素，内部调用 register(el)
- 指令负责 DOM 绑定，Hook 负责状态调度与逻辑判断，职责分离
- 避免指令内硬编码逻辑，提升复用性——同一指令可在表单、弹窗、轮播中复用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
