组合式函数必须返回 ref 或 reactive 封装的响应式数据，而非解构或解包后的普通值；模板中自动解包，js 中需通过 .value 访问；应最小化暴露必要字段，避免非响应式转换。
在组合式函数（Composable）中正确返回响应式状态，核心是确保外部组件能访问到响应式数据，同时不破坏响应性链路。关键不是“返回什么”，而是“怎么返回”和“谁来负责响应式封装”。
必须用 ref 或 reactive 封装后再返回
组合式函数内部不能直接返回普通对象或原始值，否则会丢失响应性。Vue 的响应系统只追踪 ref、reactive 及其派生（如 computed）创建的值。
- 基本类型（数字、字符串、布尔）用 ref：返回
{ count }，而不是{ count: count.value } - 对象或数组用 reactive：返回整个响应式对象，不要解构再包装
- 避免返回解构后的属性，例如不要写
return { ...state }，这会切断响应性
模板中自动解包，但 JS 逻辑里必须带 .value
从组合式函数返回的 ref，在模板中可直接写 {{ count }}；但在 setup 或其他 JS 逻辑中使用时，必须通过 count.value 读写。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 错误示例：
console.log(count)→ 输出的是 ref 对象，不是值 - 正确写法：
console.log(count.value) - 赋值也必须用
count.value = 5，不能count = 5
返回值应保持最小必要暴露
组合式函数不是工具函数，它返回的是“可被 Vue 响应系统识别的状态集合”。只暴露需要被模板或父组件使用的字段，隐藏内部实现细节。
- 推荐结构：
return { data, loading, error, refresh } - 避免暴露未加工的 raw 值或副作用函数（如 timer、event listener）
- 若需控制副作用，应封装为方法（如
startPolling()），而非直接暴露定时器变量
不要在返回前做非响应式转换
常见错误是在 return 之前对 ref 做解包、JSON 序列化、Object.assign 等操作，这会导致响应性丢失。
- ❌ 错误：
return { count: count.value }→ 返回的是普通数字，不再响应 - ❌ 错误：
return { ...toRefs(state) }虽然可用，但仅适用于 reactive 对象且易引发遗漏 - ✅ 推荐：
return { count, user, list }，原样返回已声明的 ref/reactive 变量
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
