用window对象全局分发事件实现跨组件状态同步，本质是利用CustomEvent在全局广播状态变更，各组件通过addEventListener监听并响应，需注意生命周期管理、命名规范及内存泄漏风险。
用 window 对象全局分发事件实现跨组件状态同步，本质是利用浏览器原生的事件系统（CustomEvent）在全局作用域广播状态变更，让任意监听该事件的组件都能响应。这种方式轻量、不依赖框架、适合简单场景，但要注意生命周期管理与内存泄漏风险。
创建和派发自定义事件
在状态变更处（如按钮点击、API 响应后），用 window.dispatchEvent() 发出带数据的自定义事件：
- 使用
new CustomEvent(type, { detail })构造事件，detail是你传递的状态对象 - 确保
type命名清晰（如"user:login"、"theme:changed"），避免冲突 - 示例：
window.dispatchEvent(new CustomEvent("cart:updated", { detail: { items: 3, total: 99.9 } }));
在组件中监听并响应事件
各组件在挂载时调用 window.addEventListener()，卸载前必须移除监听，否则会造成重复绑定或内存泄漏：
- 监听时从
event.detail中解构所需数据，触发本地状态更新（如useState或ref） - React 示例（函数组件）：
useEffect(() => {<br> const handler = (e) => setCart(e.detail);<br> window.addEventListener("cart:updated", handler);<br> return () => window.removeEventListener("cart:updated", handler);<br>}, []); - Vue 或纯 JS 组件同理，关键是在销毁/离开前清理监听器
封装成可复用的工具函数
为避免重复写 addEventListener 和 removeEventListener，可封装简易事件总线：
-
emit(type, data)：统一派发事件 -
on(type, handler)：返回一个off函数用于卸载 - 示例：
const off = on("auth:changed", ({ user }) => setUser(user));<br>useEffect(() => () => off(), []); - 这样能提升可读性，也便于后期迁移到更健壮的状态管理方案（如 Zustand、Pinia）
注意事项与边界情况
这种机制不是万能的，需警惕以下问题：
- 无事件顺序保证：多个监听器执行顺序取决于添加顺序，不适用于强时序依赖逻辑
-
无法跨 iframe 或跨窗口通信：仅限当前
window上下文，子 iframe 需用postMessage -
调试困难：事件流不可视化，建议配合
console.log或简单日志标记（如console.debug("[EVENT]", type, detail)） - 不适用于高频更新状态：如实时输入、动画帧，应优先用局部状态或专用响应式系统
