customevent可替代全局事件总线，但仅限单页内轻量通信；它依赖document分发、不跨iframe、需手动管理监听器且detail须可结构化克隆。
CustomEvent 能否替代全局事件总线？
可以，但必须明确边界：它只适合轻量、单页内、非跨框架的组件通信。浏览器原生 CustomEvent 本质是 DOM 事件，依赖事件冒泡或手动分发目标，不提供订阅管理、异步队列、错误隔离等能力。如果你的“在线运行组件”（比如代码编辑器 + 预览 iframe + 控制台输出区）之间没有强生命周期耦合，且不需要跨 iframe 或跨 Shadow DOM 通信，CustomEvent 是最轻、最无侵入的选择。
关键判断点：
- 所有组件都挂载在同一个 document 下（iframe 需用
window.contentWindow.dispatchEvent单独处理） - 不需要监听“历史事件”或“重放事件”
- 不依赖事件取消（
preventDefault对自定义事件无实际意义） - 不需对同一事件做多次拦截或中间处理（比如日志、鉴权）
如何正确创建和分发 CustomEvent 传递代码与配置？
重点在数据序列化和事件作用域控制。不要把整个 Vue 实例或函数传进去——CustomEvent 的 detail 必须可结构化克隆（structured clone），否则会静默丢弃。
推荐做法：
- 只传纯 JSON 可序列化的对象：
{ code: "console.log(1)", lang: "js", timeout: 2000 } - 用
document作为默认调度目标（避免依赖父容器 ID），接收方用document.addEventListener("run-code", handler) - 为避免冲突，加命名空间前缀：
"editor:run"、"preview:ready" - 如果需响应式反馈（如执行结果），由接收方主动 dispatch 另一个事件（如
"runtime:result"），不要试图在原事件里 return
const event = new CustomEvent("editor:run", {
detail: { code: "42", lang: "js" },
bubbles: false, // 防止意外冒泡到无关父节点
cancelable: false
});
document.dispatchEvent(event);
为什么 preview iframe 里收不到 CustomEvent？
因为 CustomEvent 不跨浏览上下文（browsing context）。iframe 有自己的 window 和 document，主页面 dispatch 的事件不会自动进入 iframe。
两种可行解法：
- 主页面获取 iframe 的
contentWindow，直接调用其dispatchEvent：iframe.contentWindow.dispatchEvent(new CustomEvent(...))（注意同源限制） - iframe 内部监听
window上的message事件，主页面用iframe.contentWindow.postMessage()发送数据，再由 iframe 自行转为CustomEvent触发本地逻辑（更健壮，支持跨域）
postMessage 是唯一可靠通道。
监听时怎么避免内存泄漏和重复绑定？ DOM 事件监听器不会自动销毁，组件卸载（比如切换 tab、v-if=false）后若未手动移除，会导致 handler 持有闭包引用、重复执行。
必须做到：
- 保存事件处理器引用（不能用匿名函数）：
const handler = (e) => {...}; document.addEventListener("editor:run", handler); - 在组件销毁时机显式移除：
document.removeEventListener("editor:run", handler) - 如果使用框架（Vue/React），确保在 unmount / useEffect cleanup 中执行移除
- 不要在每次 props 更新时重新 addEventListener —— 先 remove 再 add，或用 flag 控制是否已绑定
detail 中带 id 字段，或用不同事件名（"preview:run:123"），而不是靠监听器位置判断归属。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
