vue 3组合式函数应返回ref、computed等响应式包装值，而非普通对象；ref适用于单值，computed用于派生计算，reactive需配合torefs解构保响应性，script setup中顶层响应式声明自动暴露。
在 Vue 3 组合式函数（Composable）中返回响应式数据流，核心是**确保返回的值本身具备响应性，且调用方能直接在模板或逻辑中 reactive 地使用它**。不是“返回普通变量”，而是返回 ref、reactive、computed 或其他响应式包装后的值。
返回 ref 或 computed 是最常用方式
绝大多数组合式函数应返回 ref（含 shallowRef）或 computed，因为它们天然可解构、可响应、可直接绑定到模板：
-
用
ref包裹基础值或对象：适合返回单个响应式字段，比如计数器、开关状态、当前时间等。
例如：const count = ref(0)，调用方解构后直接{{ count }}使用，修改需count.value++。 -
用
computed返回派生响应式值：适合封装计算逻辑，避免重复计算，且自动追踪依赖。
例如：const double = computed(() => count.value * 2)，返回的是只读响应式 ref，模板中{{ double }}会随count自动更新。 -
避免直接返回原始对象或普通函数返回值：如
return { data: {} }中的data若未用reactive或ref包裹，则不是响应式的，模板无法响应变化。
返回 reactive 对象适用于结构较复杂的内部状态
当组合式函数管理一组关联的响应式字段（如表单状态、分页参数），可返回一个 reactive 对象，但要注意解构会丢失响应性：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 正确做法：返回整个
reactive对象，调用方通过点语法访问，如form.name；或用toRefs解构保响应性：const { name, email } = toRefs(form)。 - 错误做法：直接
const { name } = reactive({ name: '' })—— 此时name是普通字符串，不再响应。
组合式函数中主动暴露控制能力（如 useNow）
像 useNow 这类工具型组合式函数，常通过 controls: true 返回带方法的对象，本质仍是返回响应式 ref 加上配套操作：
- 例如：
const { now, pause, resume } = useNow({ controls: true })，其中now是ShallowRef<date></date>，可直接{{ now }}；pause和resume是普通函数，用于控制刷新行为。 - 这种模式的关键是：所有对外暴露的“数据”都经过响应式包装，所有“行为”都作为配套方法一并返回，不破坏响应链。
注意 setup 中的 script setup 语法糖简化返回
在 <script setup></script> 中，无需显式 return，所有顶层声明的 ref、computed、reactive（配合 toRefs）都会自动暴露给模板：
- 例如：
const now = useNow()写在<script setup></script>里，模板中就能直接{{ now }}，Vue 编译器会自动处理响应式绑定。 - 这降低了组合式函数使用者的心智负担，但底层逻辑不变——返回的仍是响应式引用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
