本文介绍如何在 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();

对应模板中即可精准绑定：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

<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 组件。