前言上一篇我们学习了Vue3选项式API快速入门了框架基础与组件化开发。但在真实企业Vue3项目中几乎不再使用选项式API全部采用组合式APIsetup开发。选项式API适合新手入门、结构直观但存在致命短板业务复杂后data、methods、生命周期代码分散同一功能逻辑割裂代码臃肿、难以维护。组合式API是Vue3的核心升级亮点也是面试、项目开发的必考重点核心优势按功能聚合代码、逻辑可复用、适配大型项目、TypeScript友好。本篇从零吃透setup语法、响应式API、代码规范彻底切换企业主流开发模式。一、选项式API vs 组合式API核心区别1. 选项式APIVue2传统写法代码按类型拆分数据放data、方法放methods、生命周期放对应钩子。复杂业务中同一个功能的代码分散在各个区域阅读和维护成本极高。2. 组合式APIVue3企业写法代码按业务功能聚合一个功能的变量、方法、监听逻辑集中写在一起结构清晰、方便复用、适配复杂中后台项目。二、setup 核心基础语法setup 是组合式API的入口函数组件创建前执行、无this、优先于所有生命周期执行。核心规则定义的变量、函数必须return暴露模板中才能使用。template div p{{ msg }}/p button clickchangeMsg修改内容/button /div /template script setup // 无需return语法糖简化写法企业首选 let msg Vue3组合式API入门 // 定义方法 const changeMsg () { msg 掌握企业主流开发方式 } /scriptscript setup是Vue3语法糖简化了传统setup的return逻辑代码更精简目前企业项目100%使用。三、Vue3核心响应式API实战必用1. ref 基本类型响应式专门处理字符串、数字、布尔等基本数据类型赋值/取值需要通过.value模板中无需。script setup import { ref } from vue // 定义响应式数据 let count ref(0) const addCount () { count.value // 逻辑层修改需要.value } /script template p计数{{ count }}/p button clickaddCount1/button /template2. reactive 引用类型响应式专门处理对象、数组引用类型数据无需.value直接修改属性。script setup import { reactive } from vue // 定义对象响应式数据 const userInfo reactive({ name: 前端学习者, age: 20, hobby: 编程 }) // 修改数据 const changeUser () { userInfo.name Vue3开发者 userInfo.age 21 } /script3. ref 与 reactive 选型规范企业标准基本数据类型数字、字符串、布尔→ 必用 ref对象、数组、复杂数据 → 必用 reactive简单列表数据优先ref复杂表单对象优先reactive四、组合式API父子通信企业规范1. 父传子defineProps组合式API无需导入直接使用编译器宏函数支持类型校验、默认值。// 子组件接收参数 const props defineProps({ title: { type: String, default: 默认文章标题 }, id: { type: Number, required: true // 必传参数 } })2. 子传父defineEmits// 子组件定义自定义事件 const emit defineEmits([sendData]) // 触发事件传值 const sendMsg () { emit(sendData, 子组件传递的内容) }五、组合式API核心优势简历亮点逻辑聚合同一业务逻辑集中编写无需分散查找代码复用可抽取独立逻辑函数全局复用无冗余代码适配大型项目复杂业务架构清晰维护成本低TS友好完美适配TypeScript企业中大型项目标配体积更小语法精简打包体积优于选项式API六、本篇结语掌握组合式API意味着你彻底脱离Vue2老旧写法完全适配Vue3企业开发规范。从本篇开始所有Vue实战项目、面试答题、代码编写均以组合式API为标准完全对标职场真实开发。下一篇我们精讲Vue3完整生命周期搞定组件加载、更新、销毁全流程掌握接口请求、数据初始化、内存优化的核心时机。