Vue3组合式API实战教程：告别Options API的繁琐，代码复用性暴涨

前言Vue3 引入的组合式 APIComposition API彻底改变了组件逻辑的组织方式。相比于 Vue2 的 Options APIdata、methods、computed 分块组合式 API 允许我们按逻辑关注点聚合代码让复杂组件的可读性和复用性大幅提升。本文会用 5 个对比案例带你快速上手。一、核心概念setup组件中组合式 API 的入口在 beforeCreate 之前执行ref包装基本类型为响应式对象访问时需 .valuereactive包装对象/数组直接访问属性即可computed计算属性watch/watchEffect侦听数据变化二、代码对比计数器最简单的迁移Options API 写法templatebutton clickincrementcount:{{count}}/button/templatescriptexportdefault{data(){return{count:0}},methods:{increment(){this.count}}}/scriptComposition API 写法templatebutton clickincrementcount:{{count}}/button/templatescript setupimport{ref}fromvueconstcountref(0)constincrement(){count.value}/script三、实战用户信息表单逻辑分离templatedivinputv-modelform.nameplaceholder姓名inputv-modelform.emailplaceholder邮箱p校验结果{{validationMsg}}/p/div/templatescript setupimport{reactive,computed,watch}fromvue//响应式表单数据constformreactive({name:,email:})//计算属性实时校验constvalidationMsgcomputed((){if(!form.name) return 请填写姓名if(!form.email.includes()) return 邮箱格式不正确return信息完整})//侦听表单变化模拟保存草稿 watch(form,(newVal){console.log(表单变化:, newVal)//可调用接口保存草稿},{deep:true})/script四、逻辑复用Composables—— 最大的优势假设多个组件都需要获取鼠标位置传统 mixins 容易有命名冲突而组合式 API 可以抽离成独立函数useMousePosition.jsimport{ref,onMounted,onUnmounted}fromvueexportfunctionuseMousePosition(){constxref(0)constyref(0)constupdate(e){x.valuee.pageX y.valuee.pageY}onMounted(()window.addEventListener(mousemove,update))onUnmounted(()window.removeEventListener(mousemove,update))return{x,y}}在组件中使用templatediv鼠标位置{{x}},{{y}}/div/templatescript setupimport{useMousePosition}from./useMousePositionconst{x,y}useMousePosition()/script五、生命周期映射Options API Composition API (在 setup 中)created 直接写setup 本身执行时mounted onMounted(() {})updated onUpdated(() {})unmounted onUnmounted(() {})总结组合式 API 不是要完全替代 Options API而是在组件逻辑复杂时提供更好的组织方式。建议新项目直接使用