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)时,是绕不开的关键能力
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!










