Vue Composition API 管理弹窗的核心是将显隐控制抽离为可复用、响应式、跨组件共享的逻辑单元，通过 ref/reactive 封装状态，配合 open/close 等函数接口，支持多实例、参数透传及 Pinia 持久化。
Vue Composition API 管理弹窗显示与隐藏的通用状态，核心是把“显隐控制”从组件模板中抽离出来，变成可复用、可注入、响应式驱动的逻辑单元。它不依赖 v-if 或 v-show 写在某个特定组件里，而是用 ref 或 reactive 封装一个跨组件共享的状态容器，并配合函数暴露操作接口。
用 ref 封装基础显隐状态
最简方式是定义一个响应式布尔值：
-
const isVisible = ref(false)—— 控制是否渲染弹窗内容 -
function open() { isVisible.value = true }和function close() { isVisible.value = false }提供明确的操作语义 - 该组合函数可导出为
useModal，在任意组件中调用const { isVisible, open, close } = useModal()
支持多实例与参数透传的状态管理
单个 ref 不足以应对复杂场景（比如同时打开确认框 + 表单弹窗）。这时需升级为结构化状态：
- 用
reactive管理当前弹窗配置：{ component: null, props: {}, resolve: null, reject: null } - 每次
open(options)时更新整个对象，并保存 Promise 的resolve/reject回调 - 弹窗组件内部点击“确定”时调用
props.onConfirm?.()，再触发外部保存的resolve(data)
与容器组件解耦，只管状态不碰 DOM
Composition API 状态本身不渲染任何 UI，也不挂载组件。它只做三件事：
立即学习“前端免费学习笔记（深入）”；
- 响应式地记录“当前该显示什么、带什么参数、谁在等待结果”
- 提供
open()、close()、register(Component)等方法 - 把状态交给唯一挂载的
<modalcontainer></modalcontainer>组件去消费（通过 provide/inject 或全局 store）
配合 Pinia 实现跨路由/跨模块共享
当弹窗需要在路由跳转后仍保持或恢复状态（如表单未提交被拦截），建议用 Pinia：
- 定义
useModalStore()，内含visible、current、queue等 state - actions 中封装
show({ component, ... })，自动 push 到队列并激活首个 - 组件卸载前可调用
store.clearOnLeave()防止残留遮罩层
