vue 3 composition api 管理响应式状态的核心是按需组合 ref、reactive 和自定义 composable：ref 适用于原子化单一状态，reactive 适合语义关联的结构化对象，composable 封装多状态逻辑以提升复用性与可维护性。
Vue 3 的 Composition API 管理多个响应式状态，核心是按需组合 ref、reactive 和逻辑封装，而不是堆砌变量。关键不在于“数量”，而在于“组织方式”——让相关状态聚合成可理解、可复用的单元。
用 ref 管理基础类型和独立值
适合计数器、开关、输入框值等单一、原子化的状态：
- 每个
ref创建一个独立响应式引用，访问和修改必须通过.value - 多个
ref可并列声明，互不影响，也方便单独导出或复用 - 例如：
const count = ref(0)、const isLoading = ref(false)、const searchQuery = ref('')
用 reactive 管理结构化对象状态
适合一组语义关联的状态（如表单字段、用户信息、配置项），避免大量零散 ref：
-
reactive返回的是代理对象，属性可直接读写，无需.value - 嵌套属性天然响应式，适合深层结构（如
user.profile.avatar） - 示例：
const form = reactive({ username: '', email: '', agree: false })，后续操作form.username = 'abc'即可触发更新
用自定义 Composable 封装多状态逻辑
当多个状态常一起变化、共用计算或副作用时，应抽成函数（即 Composable），这是 Composition API 的核心优势：
- 把相关
ref、reactive、computed、watch和方法打包返回 - 组件中解构使用，语义清晰，且天然支持跨组件复用
- 比如
useSearch()可同时管理query、results、isSearching和防抖搜索逻辑
注意 ref 与 reactive 的协作边界
二者不是互斥，而是互补。常见混合用法：
- 在
reactive对象中，可以安全地嵌入ref（Vue 会自动解包）；但反过来，ref内部不宜直接放大型reactive对象（语义不清） - 需要将 reactive 对象整体替换时（如接口返回新数据），仍建议用
ref包一层：const data = ref(null)→data.value = response.data - 模板中使用时，
ref自动解包，reactive属性直接可用，无需额外处理
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
