Composition API 并非替代而是重构代码结构,通过 setup() 统一组织逻辑,用 ref/reactive 管理响应式状态,借助组合式函数实现逻辑复用,支持渐进式迁移。

Composition API 不是简单“替换” Options API,而是用函数式、按逻辑组织的方式重构代码结构。它把原本分散在 data、methods、computed、watch 和生命周期钩子中的相关逻辑,集中到 setup() 函数里,让同一功能的声明、响应式处理、副作用和计算都挨在一起。
核心入口:用 setup() 替代选项分块
Options API 把数据、方法、计算属性等按类型切开;Composition API 则统一收口到 setup() 中:
- setup() 在组件实例创建前执行,接收 props 和 context(含 emit、attrs、slots)
- 所有响应式变量需显式声明:用 ref() 管理基本类型或单个对象,用 reactive() 管理嵌套对象
- setup() 返回的对象,其属性会自动暴露给模板使用(ref 自动解包,无需 .value)
响应式状态:从 data() 到 ref / reactive
Options API 的 data() 返回普通对象,Vue 自动递归代理;Composition API 要手动创建响应式引用:
从零开始编排 SpringBoot+Vue 全栈项目工作流,适用于新建全栈项目或完整脚手架请求,触发后依次调用 product‑spec‑builder(需求调研)等模块。
-
ref(0) → 模板中直接写
{{ count }},脚本中读写用count.value -
reactive({ count: 0, user: { name: '' } }) → 模板中写
{{ state.count }},脚本中直接操作state.count = 5 - 避免混用:reactive 对象不能整体重新赋值,ref 可以用 .value 替换整个值
逻辑复用与生命周期:不再依赖 mixins 或 this
Options API 靠 mixins 复用逻辑,但容易命名冲突、来源不清;Composition API 借助组合式函数(Composables)自然封装:
- 把获取用户、校验表单、监听尺寸等通用逻辑抽成独立函数,如
useUser()、useFormValidation() - 生命周期钩子改用 onMounted、onUpdated、onUnmounted 等函数,在 setup 内直接调用
- watch 和 watchEffect 代替 options 中的 watch 选项,支持更灵活的依赖追踪和副作用控制
渐进式迁移:不是非此即彼
大型项目不必全量重写。Options API 组件中可直接添加 setup 选项,混合使用两种风格:
- 保留原有 data、computed、mounted 等选项
- 在 setup 中引入 ref、onMounted、自定义 hook,处理新功能或优化旧逻辑
- 逐步将分散逻辑迁移进 setup,最终移除冗余的 options 声明
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!









