本文讲解如何在 vue 3 组合式 api 中，通过合理解构和重命名 composable 返回值，使同一自定义 hook（如 `usemodal`）支持页面中任意数量的独立模态框实例，避免状态污染与重复代码。
在 Vue 3 的组合式 API 迁移过程中，将共享逻辑封装为 composable（如 useModal）是推荐实践。但一个常见误区是认为「调用多次 useModal() 就能自然获得多个隔离状态」——实际上，每次调用 useModal() 确实会创建全新响应式引用，因此完全支持多实例，只需正确解构并赋予语义化变量名即可。
关键在于：composable 函数本身不维护全局状态，其内部 ref() 每次执行都生成独立响应式对象。因此以下写法完全合法且推荐：
// Component.vue
import useModal from "@/composables/useModal";
const { isModalOpen: isOneOpen, toggleModal: toggleOne } = useModal();
const { isModalOpen: isTwoOpen, toggleModal: toggleTwo } = useModal();
const { isModalOpen: isThreeOpen, toggleModal: toggleThree } = useModal();对应模板中即可分别绑定：
模态框 1 内容 模态框 2 内容 模态框 3 内容
✅ 正确理解：useModal() 是工厂函数，不是单例。每次调用都返回一组全新的、彼此无关的响应式状态和方法。
此外，为提升可维护性，还可进一步封装为带默认名称的工厂模式（非必需，但适合复杂场景）：
立即学习“前端免费学习笔记（深入）”；
奥硕企业网站管理系统3.0.2
下载
临沂奥硕软件有限公司拥有国内一流的企业网站管理系统，奥硕企业网站管理系统真正会打字就会建站的管理系统，其强大的扩展性可以满足企业网站实现各种功能（唯一集成3O多套模版的企业建站系统）奥硕企业网站管理系统具有一下特色功能1、双语双模（中英文采用单独模板设计，可制作中英文不同样式的网站）2、在线编辑JS动态菜单支持下拉效果，同时生成中文，英文，静态3个JS菜单3、在线制作并调用FLASH展示动画4、自
// composables/useModal.ts
import { ref } from "vue";
export function useModal(initialState = false) {
const isOpen = ref(initialState);
const toggle = () => (isOpen.value = !isOpen.value);
const open = () => (isOpen.value = true);
const close = () => (isOpen.value = false);
return {
isOpen,
toggle,
open,
close,
};
}调用时更灵活：
const modal1 = useModal(false); const modal2 = useModal(true); // 初始即打开
⚠️ 注意事项：
- 不要试图复用同一个 useModal() 调用结果（如 const m = useModal(); const a = m; const b = m;），这会导致状态耦合；
- 避免在 setup() 外部缓存 composable 返回值（如 const sharedModal = useModal()），否则破坏实例隔离；
- 若模态框需共享关闭逻辑（如点击遮罩层关闭所有），应在父组件中统一管理，而非强耦合于 composable。
总结：Vue 3 的 composable 天然支持多实例，核心在于每次调用独立、解构命名清晰、语义明确。无需额外设计“多实例 API”，只需像使用 ref() 或 computed() 一样，自然地多次调用并重命名即可。
