Vue 3弹窗状态管理核心是封装可复用的响应式逻辑：useModal实现单弹窗隔离，useModals支持多弹窗键值管理，useDialogShow提供Promise式调用；结合Element Plus需用v-model替代v-model:visible，并通过setData动态传参。
Vue 3 组合式函数管理弹窗状态的核心思路是：把 visible 控制逻辑抽离成可复用的响应式状态 + 操作函数，避免每个页面手动声明一堆 ref、重复写 open/close 方法。关键不在于“怎么写一个开关”，而在于“怎么让多个弹窗共用一套管理机制，且互不干扰”。
用 useModal 封装基础显隐控制
这是最轻量通用的做法，适合单个弹窗或简单场景：
- 在
composables/useModal.ts中定义：
export function useModal() {
const visible = ref(false)
const open = () => visible.value = true
const close = () => visible.value = false
const toggle = () => visible.value = !visible.value
return { visible, open, close, toggle }
}
组件中直接解构使用，v-model:visible="visible" 或 :model-value="visible" 绑定即可。状态隔离靠模块作用域——每次 import 调用都返回独立的 ref 实例，不会串。
支持多弹窗的 useModals 管理器
当一个页面要同时管理「编辑弹窗」「分配角色弹窗」「删除确认弹窗」时，建议按 key 区分：
立即学习“前端免费学习笔记（深入）”；
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 用 reactive 对象统一维护多个弹窗状态：
export function useModals() {
const modals = reactive({
edit: false,
assign: false,
confirmDelete: false
})
const open = (key: keyof typeof modals) => modals[key] = true
const close = (key: keyof typeof modals) => modals[key] = false
const isOpen = (key: keyof typeof modals) => modals[key]
return { modals, open, close, isOpen }
}
模板中用 v-if="isOpen('edit')" 或 :model-value="modals.edit"，语义清晰，增删弹窗只需改对象字段，无需新增 ref 变量。
函数式调用 + Promise 返回（推荐用于表单/确认类弹窗）
真正提升体验的是把弹窗变成“可 await 的函数”。比如点击「编辑」后，等用户填完表单再继续后续逻辑：
- 封装
useDialogShow，内部挂载组件、监听事件、返回 Promise - 弹窗组件自身用
defineExpose暴露showDialog和closeDialog - 调用方写法简洁：
const result = await useDialogShow(EditForm, { id: 123 })
这种方式天然解决“关闭时机难控”“状态分散”“链式弹窗难组织”的问题。visible 完全由组合式函数内部管理，调用方只关心“做了什么”和“结果是什么”。
结合 Element Plus 的实际落地要点
若用 Element Plus 的 <el-dialog>，注意三点：
-
v-model:visible已废弃，统一用v-model（即:model-value+@update:model-value） - 如果弹窗需动态传入 props（如编辑数据），应在
useModal返回值中加入setData方法，配合reactive存储弹窗上下文 - 避免在 setup 中直接
ref(false)写死 visible —— 应该由组合式函数提供，确保逻辑集中、可测试、可扩展
