Vue 3组合式API中，setup或composable函数需通过return对象统一暴露ref、computed和函数等响应式成员；计算属性须用computed()创建并显式导出，方法直接定义并写入返回对象，多计算属性可自然相互依赖。
在 Vue 3 组合式 API 中，setup 函数或组合式函数（composable）返回多个计算属性与方法，本质是返回一个包含这些属性和方法的对象。只要它们被正确声明并暴露在返回对象中，模板和父组件就能直接访问。
返回方式：统一通过对象解构暴露
组合式函数内部用 ref、computed、function 等定义响应式数据和逻辑，最后用 return { } 把需要对外使用的成员列出来：
- 计算属性要用
computed(() => ...)创建，并确保在 return 对象中以键名形式导出 - 方法直接定义为普通函数，同样需显式写入返回对象
- 多个计算属性之间可相互依赖，无需额外处理（Vue 自动追踪响应式链）
典型结构示例
比如封装一个用户信息与统计逻辑的组合式函数：
${firstName.value} ${lastName.value}在组件中使用时，直接解构即可：
import { useUserStats } from './composables/useUserStats'
<p>export default {
setup() {
const {
fullName,
averageScore,
isTopStudent,
updateName,
addScore
} = useUserStats()</p><pre class="brush:php;toolbar:false;">return {
fullName,
averageScore,
isTopStudent,
updateName,
addScore
}} }
注意事项：避免常见陷阱
- 不要在 return 前对
computed或ref进行解构赋值（如const { value } = computed(...)），会丢失响应性 - 若组合式函数返回大量成员，可用
toRefs简化导出（尤其配合reactive时） - 方法内部修改响应式数据时，仍需通过
.value赋值（针对ref）或直接属性赋值（针对reactive） - 计算属性默认只读；如需可写，必须用对象形式定义
get和set
进阶技巧：按需导出与类型提示
大型项目中可结合 TypeScript 明确返回类型，提升可维护性：
import { Ref, ComputedRef, ref, computed } from 'vue'
<p>interface UserStatsReturn {
fullName: ComputedRef<string>
averageScore: ComputedRef<string>
isTopStudent: ComputedRef<boolean>
updateName: (first: string, last: string) => void
addScore: (score: number) => void
}</boolean></string></string></p><p>export function useUserStats(): UserStatsReturn { /<em> ... </em>/ }</p>这样既清晰表达了意图，也便于 IDE 自动补全和类型校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
