Vue响应式API虽非语法级可组合，但通过ref/reactive封装状态、use开头的组合式函数复用逻辑、toRef/toRefs/unref协调跨层级响应、customRef/shallowRef解决特殊场景，实现开发者主动组织的可组合性。
Vue 的响应式 API 本身不是“可组合”的，但它的设计天然支持组合——关键在于你用 ref、reactive 等基础工具封装逻辑，再通过 组合式函数（Composables） 复用和拼接。这不是语法层面的自动组合，而是开发者主动组织响应式逻辑的方式。
用 ref 和 reactive 搭建可复用的响应式骨架
ref 和 reactive 是构建自定义响应式工具的起点。它们不绑定组件，只负责状态的响应式化，因此可以自由嵌入任意函数中：
- ref 适合封装单个基础值（如 loading 状态、搜索关键词），返回对象带 .value，便于在函数内部统一管理读写
- reactive 更适合封装一组关联状态（如分页参数 { page, pageSize, total }），属性直接访问，结构清晰易扩展
- 两者都可与生命周期钩子（如 onMounted）、侦听器（watch）或计算属性（computed）搭配，形成完整的行为闭环
把逻辑抽成 use 开头的组合式函数
组合式函数是实现“可组合性”的核心载体。它把响应式状态 + 业务逻辑 + 副作用（如事件监听、API 调用）打包成一个可导出、可复用、可嵌套的函数：
- 函数名以 use 开头（如 useDebounce、useLocalStorage、useUrlQuery），符合社区约定
- 内部使用 ref/reactive 创建状态，用 watch 或 computed 衍生数据，用 onBeforeUnmount 清理副作用
- 返回一个对象，暴露需要被调用方使用的响应式变量和方法（如 { data, loading, refresh }）
- 多个组合式函数可在同一组件中同时调用，彼此隔离又可共享状态（例如 useAuth 返回的 token 可传给 useApi 配置请求头）
用 toRef、toRefs 和 unref 协调跨层级响应式
当自定义工具需要与父组件 props、外部状态或其它组合式函数对接时，工具函数能避免响应性丢失或类型混乱：
立即学习“前端免费学习笔记（深入）”；
- toRef：把 reactive 对象的某个属性变成 ref，保持与源对象同步（比如从 props 中安全提取一个可响应的 id）
- toRefs：把整个 reactive 对象转为 ref 对象集合，方便解构后仍保留响应性（常用于组合式函数 return 值）
-
unref：统一处理“可能是 ref，也可能是普通值”的参数，让自定义工具更健壮（比如接收一个 ref
或 string 的搜索关键词） - 这些工具不创建新响应性，而是桥接和适配，让不同来源的状态能自然融入你的自定义逻辑流
进阶：customRef 和 shallowRef 解决特定场景
标准 API 不够用时，Vue 提供了更底层的控制能力，让你精准定制响应式行为：
- customRef 允许你完全控制 get/set 时的依赖追踪和触发时机，适合封装防抖、节流、Web Worker 通信等有延迟或异步特性的响应式逻辑
- shallowRef 适用于大型不可变数据（如富文本编辑器快照、图表原始数据），避免深度响应式带来的性能开销，配合 triggerRef 手动通知更新
- 它们不是日常首选，但在构建高定制化工具（如 useVirtualList、useWebSocket）时，是绕不开的关键能力
