前言

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>
export default {
  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'
const count = ref(0)
const increment = () => { count.value++ }
</script>

三、实战：用户信息表单（逻辑分离）

<template>
  <div>
    <input v-model="form.name" placeholder="姓名">
    <input v-model="form.email" placeholder="邮箱">
    <p>校验结果：{{ validationMsg }}</p>
  </div>
</template>

<script setup>
import { reactive, computed, watch } from 'vue'

// 响应式表单数据
const form = reactive({
  name: '',
  email: ''
})

// 计算属性：实时校验
const validationMsg = 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'

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  const update = (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，而是在组件逻辑复杂时提供更好的组织方式。建议新项目直接使用