在 vue 3 组合式 api 中，通过合理解构 composable 返回的对象，可为同一页面中任意数量的模态框创建彼此隔离的状态，避免共享响应式引用导致的逻辑耦合。
要让 useModal() 支持多个独立实例，关键在于理解 composable 的本质：它是一个工厂函数（factory function） —— 每次调用都会返回全新、独立的响应式状态和逻辑。你之前遇到的问题并非 composable 本身不支持多实例，而是误以为多次调用会共享状态，或尝试用错误方式“重命名”变量（如 isOneOpen = useModal().isModalOpen），这其实只是浅层赋值，丢失了响应式连接。
✅ 正确做法是：每次调用 useModal() 后，立即通过对象解构重命名其返回属性，确保每个模态框拥有专属的响应式引用：
// Component.vue
<script setup>
import useModal from "@/composables/useModal";
import Modal from "@/components/Modal.vue";
// 实例 1：模态框一
const { isModalOpen: isOneOpen, toggleModal: toggleOne } = useModal();
// 实例 2：模态框二
const { isModalOpen: isTwoOpen, toggleModal: toggleTwo } = useModal();
// 实例 3：模态框三（同理可无限扩展）
const { isModalOpen: isThreeOpen, toggleModal: toggleThree } = useModal();
</script>
<template>
<button @click="toggleOne">打开模态框 1</button>
<button @click="toggleTwo">打开模态框 2</button>
<button @click="toggleThree">打开模态框 3</button>
<Modal :is-open="isOneOpen" @close-modal="toggleOne">这是模态框 1 的内容</Modal>
<Modal :is-open="isTwoOpen" @close-modal="toggleTwo">这是模态框 2 的内容</Modal>
<Modal :is-open="isThreeOpen" @close-modal="toggleThree">这是模态框 3 的内容</Modal>
</template>⚠️ 注意事项：
- 不要试图用 ref() 或 computed() 包裹 useModal().isModalOpen 来“复制”响应式变量——这会切断与原始 ref 的响应式链接；
- 避免在同一个 useModal() 调用后多次解构（如 const a = useModal(); const { x } = a; const { y } = a;），虽可行但冗余，直接多次调用更清晰；
- 若模态框逻辑高度相似但需差异化配置（如标题、确认回调），可增强 useModal 接收参数：
// useModal.ts export function useModal(defaultOpen = false) { const isModalOpen = ref(defaultOpen); const toggleModal = () => isModalOpen.value = !isModalOpen.value; return { isModalOpen, toggleModal }; } // 使用时：const { isModalOpen: isLoginOpen } = useModal(false);
? 总结：Vue 3 composables 天然支持多实例，核心在于「每次调用即创建新状态」。通过解构重命名（{ isModalOpen: isOneOpen }）即可优雅实现任意数量模态框的独立控制，无需重复编写逻辑，也无需引入额外状态管理库——这正是组合式 API 解耦与复用能力的最佳实践。
立即学习“前端免费学习笔记（深入）”；
