Vue 3 组合式函数（Composable）能否导出多个函数？

当然不属实，单个.ts组合式函数文件完全支持导出多个组合式函数，这是日常开发中很常见的写法——尤其当多个函数功能关联、属于同一业务领域时，放在同一个文件里更便于归类维护。

示例代码：单个文件导出多个组合式函数 #

// composables/useUser.ts
import { ref, computed } from 'vue'

// 组合式函数1：处理用户基础信息
export function useUserProfile() {
  const userName = ref('')
  const userAge = ref(0)
  const isAdult = computed(() => userAge.value >= 18)

  const updateName = (newName: string) => {
    userName.value = newName
  }

  return { userName, userAge, isAdult, updateName }
}

// 组合式函数2：处理用户权限逻辑
export function useUserPermissions() {
  const permissions = ref<string[]>([])

  const hasPermission = (perm: string) => {
    return permissions.value.includes(perm)
  }

  const addPermission = (perm: string) => {
    if (!permissions.value.includes(perm)) {
      permissions.value.push(perm)
    }
  }

  return { permissions, hasPermission, addPermission }
}

组件中导入使用示例 #

<script setup lang="ts">
import { useUserProfile, useUserPermissions } from '@/composables/useUser'

// 按需解构导入的组合式函数返回值
const { userName, updateName, isAdult } = useUserProfile()
const { hasPermission, addPermission } = useUserPermissions()

// 业务逻辑调用
updateName('Alice')
addPermission('edit_post')
console.log(isAdult.value) // false（初始userAge为0）
console.log(hasPermission('edit_post')) // true
</script>

如果多个组合式函数之间存在依赖关系，也可以在同一个文件内互相调用（注意避免循环依赖即可），进一步复用逻辑。

内容的提问来源于stack exchange，提问作者Norm Strassner