Provide 实现全局弹窗单例的核心是依赖注入+单一响应式状态源：顶层 provide 一次服务实例，所有 inject 处共享同一响应式引用，open/close 操作同步触发更新，无需手动控制实例唯一性。
用 Provide 实现全局弹窗服务的单例模式，核心是把弹窗逻辑封装成一个可复用、状态集中、实例唯一的响应式服务，并通过 provide/inject 在整个组件树中透传——它不是靠闭包或类静态属性“硬锁”单例，而是靠 Vue 的依赖注入机制 + 单一响应式状态源来达成事实上的单例效果。
为什么 Provide 能天然支持单例语义？
Provide 的值在应用初始化时被注入一次，所有 inject 它的组件共享同一份响应式引用。只要你在顶层（如 main.js 或 App.vue）只调用一次 createDialogService() 并 provide 出去，后续所有页面、组件拿到的都是同一个对象实例，无需手动判断是否已存在。
- inject 得到的是响应式对象的引用，不是副本
- state（如 dialogVisible）用 ref 或 reactive 声明，变更会自动触发所有使用处更新
- open/close 方法操作的是同一份 state，天然避免多实例冲突
关键实现步骤：封装 + 注入 + 使用
分三步落地，不依赖第三方库，纯 Vue 3 Composition API：
- 封装服务函数：在单独文件（如 dialogService.js）中定义 openDialog、closeDialog、destroy 等方法，内部统一管理 ref(dialogVisible) 和动态挂载的 DOM 容器
-
顶层注入：在 main.js 中创建服务实例并 provide：
app.provide('dialogService', { openDialog, closeDialog }) -
任意组件调用：用
const { openDialog } = inject('dialogService')拿到方法，一行代码触发弹窗，无需引入组件、声明 v-model、写 show/hide 逻辑
必须处理的两个边界问题
否则在 SSR 或多 tab 场景下会出错：
-
DOM 环境检测：服务内部所有 document.createElement、appendChild 必须包裹
if (typeof document !== 'undefined')，防止 Node.js 环境报错 - 容器复用与清理：首次 open 创建 container 并挂载；close 时不 removeElement，仅隐藏；destroyAll 才真正卸载——避免重复创建/销毁开销，也保证单例生命周期可控
和闭包单例的本质区别
Provide 方案不是“阻止创建多个实例”，而是“让所有使用者默认指向同一实例”。它更轻量、更 Vue 化：
- 没有 IIFE 闭包、没有 instance 缓存变量、不关心 new 或构造函数
- 状态响应式驱动 UI，而非手动控制 display/block
- 天然兼容 Pinia（可将 dialogService 改为 store），便于统一状态管理
