Vue 3 Composition API 实战心得

2026-05-25 · Vue.js

为什么要迁移到 Composition API

在 Vue 2 中，我们用 Options API 组织代码，data、methods、computed 各管各的。组件小的时候还好，一旦超过 300 行，同一个关注点的逻辑就散落在各个选项里，排查起来很痛苦。

Vue 3 的 Composition API 用 setup() 将同一功能的逻辑聚合在一起，不仅可读性变好，逻辑抽离成 composables 后还能跨组件复用。

简单来说：Options API 是按"选项"分片，Composition API 是按"功能"聚合。

ref vs reactive：什么时候用什么

刚上手时最容易纠结的就是 ref 和 reactive 的选择。我的实践结论如下：

单值类型（string、number、boolean）一律用 ref
对象/数组推荐用 reactive，不需要 .value
需要整体替换对象的场景用 ref 包裹

import { ref, reactive } from 'vue'

const count = ref(0)          // 基本类型
const user = reactive({       // 对象
  name: '张明',
  age: 28
})

const form = ref({            // 需要整体替换
  title: '',
  content: ''
})

Composables：逻辑复用的正确姿势

以前 Vue 2 时期用 mixins 复用逻辑，但 mixins 有命名冲突和来源不清晰的问题。Composables 通过函数封装，干净很多。

// composables/useUser.js
import { ref } from 'vue'

export function useUser() {
  const user = ref(null)
  const loading = ref(false)

  async function fetchUser(id) {
    loading.value = true
    try {
      const res = await fetch(`/api/users/${id}`)
      user.value = await res.json()
    } finally {
      loading.value = false
    }
  }

  return { user, loading, fetchUser }
}

实际项目中的总结

不要为了用 Composition API 而用——简单的展示组件用 Options API 更清爽
一个 composable 只做一件事，保持单一职责
watchEffect 比 watch 更简洁，但要注意副作用时机
setup 中的 this 是 undefined，习惯用解构从 composable 获取变量