Vue3 的 Composition API 确实优雅

之前一直用 Vue2 的 Options API，写业务代码没问题，但逻辑复用的时候就很头疼。这次项目尝试用 Vue3 的 Composition API，感觉完全不一样。

为什么 Composition API 更好

Options API 的问题：同一个功能的相关逻辑分散在不同选项里（data、methods、computed、watch）。改一个功能要在多个地方跳来跳去。

Composition API 的思路是按逻辑组织代码，而不是按选项类型。一个功能的所有东西放在一起。

setup 函数

这是 Composition API 的入口：

<script setup>
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const count = ref(0)
const doubled = computed(() => count.value * 2)

// 方法
function increment() {
  count.value++
}

// 生命周期
onMounted(() => {
  console.log('组件挂载了')
})
</script>

逻辑复用：Composables

这是最爽的部分。把重复逻辑抽成单独的函数：

// useCounter.js
import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  
  function increment() {
    count.value++
  }
  
  function decrement() {
    count.value--
  }
  
  return { count, increment, decrement }
}

// 在组件中使用
const { count, increment } = useCounter()

比 Vue2 的 mixins 清晰多了。mixin 的问题是不知道变量来自哪个 mixin，还有命名冲突。

实用场景

做表单验证的时候，抽成一个 useForm：

export function useForm(initialValues) {
  const values = ref({ ...initialValues })
  const errors = ref({})
  
  function validate(rules) {
    // 验证逻辑
  }
  
  function reset() {
    values.value = { ...initialValues }
  }
  
  return { values, errors, validate, reset }
}

任何表单组件都能用，代码复用效率很高。

一些经验

• ref 用 .value 访问，reactive 直接访问
• 函数返回值要保持一致性，用 ref 就都用 ref
• 抽离 composables 时注意生命周期钩子的注册位置
• watch 和 computed 的用法和 Vue2 一样

总结

Composition API 确实让代码组织更清晰了。逻辑复用也变得更简单，不会有 mixin 的那些坑。

建议新项目直接上 Vue3 + Composition API，老项目可以慢慢迁移。