在 vue 3 组合式 api 中，一个 composable（如 `usemodal`）默认返回共享响应式状态，无法直接支持多实例；需通过解构重命名或参数化设计，使每个调用独立维护自身状态。
要让 useModal 同时支持多个模态框实例（如 Modal 1 和 Modal 2），核心在于确保每次调用 useModal() 都创建一份独立的响应式状态副本——而 Vue 的 ref、reactive 等响应式 API 天然具备该能力：只要 useModal 是一个普通函数（非单例），每次调用都会新建 ref 实例。
✅ 正确做法：利用 ES6 解构重命名，为不同实例分配专属变量名
// useModal.ts
import { ref } from 'vue'
export function useModal() {
const isOpen = ref(false)
const toggle = () => { isOpen.value = !isOpen.value }
const open = () => { isOpen.value = true }
const close = () => { isOpen.value = false }
return {
isOpen,
toggle,
open,
close
}
}在组件中多次调用并解构重命名：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
<!-- Component.vue -->
<template>
<button @click="modalOne.toggle">Open Modal 1</button>
<button @click="modalTwo.toggle">Open Modal 2</button>
<Modal :is-open="modalOne.isOpen" @close-modal="modalOne.close">Modal 1 Content</Modal>
<Modal :is-open="modalTwo.isOpen" @close-modal="modalTwo.close">Modal 2 Content</Modal>
</template>
<script setup lang="ts">
import { useModal } from './composables/useModal'
import Modal from './Modal.vue'
// ✅ 每次调用 create 独立状态 —— 关键！
const modalOne = useModal()
const modalTwo = useModal()
</script>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- ❌ 不要写成 const { isOpen: isOneOpen } = useModal() 再重复解构（虽语法合法，但语义模糊且易出错）；推荐直接赋值为对象（如 modalOne），语义更清晰、API 更一致、便于后续扩展方法（如 open()/close()）。
- ❌ 避免在 setup() 外部缓存 useModal() 返回值（如 const sharedModal = useModal()），否则所有组件将共享同一状态。
- ✅ 若需进一步抽象（如带初始状态或 ID），可升级 useModal 为工厂函数：
// 支持初始化与标识
export function useModal(initial = false, id?: string) {
const isOpen = ref(initial)
const toggle = () => { isOpen.value = !isOpen.value }
return {
id,
isOpen,
toggle,
open: () => { isOpen.value = true },
close: () => { isOpen.value = false }
}
}
// 使用时可传参区分行为
const modalA = useModal(true, 'login')
const modalB = useModal(false, 'confirm')? 总结：Vue 3 的 composables 本质是「状态工厂函数」，其复用性正源于每次调用都生成全新响应式引用。无需特殊技巧，只需保证：多次调用 + 合理命名/组织返回值，即可优雅支撑任意数量的独立模态框、抽屉、提示框等交互组件。
