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 Builder
下载
从零开始编排 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 声明
