组合式函数中应返回 ref 对象而非 .value，因 ref 的响应性存在于对象本身；返回 .value 会得到普通值，脱离响应式系统。正确做法是返回整个 ref，如 useCounter 返回 { count, increment, reset }，其中 count 是 ref 对象。
在组合式函数（Composable）中用 ref 返回响应式数据流，核心是：**返回 ref 对象本身，不解构、不取 .value，让调用方直接使用该引用**。这样既能保持响应性，又支持后续在模板或逻辑中自动更新。
为什么不能直接返回 .value？
如果返回 count.value，得到的是一个普通数字（如 0），它脱离了响应式系统，后续任何修改都不会触发视图更新。ref 的响应性就存在于那个带 .value 的对象里，而不是值本身。
正确做法是返回整个 ref 对象——它既是“容器”，也是“连接响应式系统的入口”。
组合式函数中 ref 的标准写法
以一个计数器组合函数为例：
立即学习“前端免费学习笔记（深入）”；
import { ref } from 'vue'
export function useCounter(initial = 0) {
const count = ref(initial)
const increment = () => count.value++
const reset = () => (count.value = initial)
return { count, increment, reset }
}
注意：
– count 是 ref 对象，不是数字；
– increment 和 reset 在内部操作 .value；
– 外部解构使用时，仍需通过 count.value 读写（在 JS 中），但模板里可直接写 {{ count }}。
在 setup 或 <script setup> 中如何消费</script>
在组件中调用时，保持 ref 的完整性：
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
import { useCounter } from './composables/useCounter'
export default {
setup() {
const { count, increment, reset } = useCounter(10)
return { count, increment, reset }
}
}
或者更简洁的 <script setup></script>：
<script setup></script>
import { useCounter } from './composables/useCounter'
const { count, increment, reset } = useCounter(10)
此时 count 仍是 ref，可直接传给子组件、用于 watch、或在模板中绑定：<button>{{ count }}</button>
进阶：配合 toRef / toRefs 避免丢失响应性
当组合式函数返回的是 reactive 对象，而你想把其中某个字段单独暴露为 ref（比如要传给另一个只接受 ref 的函数），可用 toRef：
import { reactive, toRef } from 'vue'
export function useUser() {
const state = reactive({ name: 'Alice', age: 25 })
return {
name: toRef(state, 'name'), // 响应式绑定到 state.name
age: toRef(state, 'age'),
state // 也可一并暴露原始 reactive
}
}
这样外部拿到的 name 就是一个真正的 ref，和 ref() 创建的行为一致，适合跨组合函数协作。
