本文讲解如何在 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();对应模板中即可分别绑定：
<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>
✅ 正确理解：useModal() 是工厂函数，不是单例。每次调用都返回一组全新的、彼此无关的响应式状态和方法。
此外，为提升可维护性，还可进一步封装为带默认名称的工厂模式（非必需，但适合复杂场景）：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
// 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() 一样，自然地多次调用并重命名即可。
