本文介绍如何在 vue 3 composition api 中正确使用 composable 函数管理多个模态框（modal）的独立开关状态，避免状态污染，通过解构重命名实现多实例隔离。
在 Vue 3 的组合式 API 迁移过程中，一个常见痛点是：单个 composable 函数默认返回共享响应式状态，无法直接支持同一页面中多个独立模态框的并行控制。例如，useModal() 若内部仅声明一个 ref<boolean>，多次调用 useModal() 实际上会创建多个独立的响应式引用——这是完全可行且推荐的做法，但关键在于必须为每次调用的返回值赋予语义化、互不冲突的变量名。
✅ 正确做法：每次调用 useModal() 都生成全新、隔离的状态实例，再通过解构重命名明确归属：
// Component.vue
import useModal from "@/composables/useModal";
// ✅ 每次调用 create 独立 ref，解构时重命名以区分上下文
const { isModalOpen: isModalOneOpen, toggleModal: toggleModalOne } = useModal();
const { isModalOpen: isModalTwoOpen, toggleModal: toggleModalTwo } = useModal();
const { isModalOpen: isSettingsOpen, toggleModal: toggleSettings } = useModal();对应模板中即可精准绑定：
<template> <button @click="toggleModalOne">打开模态框 1</button> <button @click="toggleModalTwo">打开模态框 2</button> <button @click="toggleSettings">打开设置面板</button> <Modal :is-open="isModalOneOpen" @close-modal="toggleModalOne">内容一</Modal> <Modal :is-open="isModalTwoOpen" @close-modal="toggleModalTwo">内容二</Modal> <Modal :is-open="isSettingsOpen" @close-modal="toggleSettings">设置</Modal> </template>
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要尝试“复用同一个 composable 返回值”（如 const a = useModal(); const b = a;），这会导致状态耦合；
- 无需修改 useModal 内部逻辑——它本就设计为工厂函数，每次调用返回新实例；
- 若需传递初始状态，可增强 composable 接口：
export function useModal(initialValue = false) { const isModalOpen = ref(initialValue); const toggleModal = () => isModalOpen.value = !isModalOpen.value; return { isModalOpen, toggleModal }; } // 使用：const { isModalOpen: isLoginOpen } = useModal(false); - 对于大量模态框场景，可进一步封装为 useModals() 并返回 Map 或数组，但多数情况下解构重命名已足够清晰、可控。
总结：Vue 3 composables 的本质是状态工厂函数，其复用性正体现在「多次调用 → 多个独立状态」这一模式中。只需善用 ES6 解构赋值的别名语法（{ x: y }），即可优雅支撑任意数量的模态框、抽屉、提示框等需要独立控制的 UI 组件。
