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