Vue3 Composition API完全入门

Vue3 Composition API 是什么？与 Options API 对比及 setup 执行时机

很多刚接触 Vue3 的朋友都会懵，为啥好好的 Options API 不用，非要整个 Composition API 出来？换个角度看，这是 Vue 团队为了应对复杂组件逻辑搞出来的新玩法。Vue 3 最新稳定版是 3.4.x（2023 年 12 月发布的），核心特性从 3.0（2020 年 9 月）就定下来了，Composition API 就是那时候的核心成员。

咱们先回忆下 Options API 的写法：一个组件里，data 放数据，methods 放方法，computed 放计算属性，watch 放监听，mounted 放生命周期... 逻辑一复杂，比如一个“用户列表+筛选+分页”的组件，你会发现：相关的数据（userList、filter、page）在 data 里，处理筛选的方法在 methods 里，监听筛选变化的 watch 在 watch 里，生命周期里还要初始化请求。这些本来是一伙的逻辑，硬生生被拆成了好几块，找代码的时候得上下翻，这就是大家常说的“碎片化”问题。

Composition API 就是来解决这个的。它把同一功能的逻辑聚合在一起，用函数的方式组织代码。比如刚才的用户列表，你可以把“用户数据+筛选方法+分页逻辑”全写在一个函数里，组件里直接调用就行。而且它天然支持 TypeScript，类型推导比 Options API 顺溜多了，不用搞那些花里胡哨的装饰器。

这里必须提一下 setup() 函数，它是 Composition API 的入口。setup 执行时机在 beforeCreate 之前，这时候组件实例还没创建呢，所以你在 setup 里根本访问不到 this。很多新手刚上手会实际案例，比如在 setup 里写 this.dataName，直接报错，就是因为这时候 this 还不存在。

咱们看个最基础的 setup 示例，用的是 Vue 3.4.x 的写法：

<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">加 1</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    // 用 ref 定义基本类型响应式数据（后面章节细讲）
    const count = ref(0)

    // 定义方法
    const increment = () => {
      count.value++
    }

    // 必须返回，模板才能访问到
    return {
      count,
      increment
    }
  },
  beforeCreate() {
    console.log('beforeCreate 执行了')
  }
}
</script>

你运行的时候会发现，setup 里的逻辑先执行，然后才是 beforeCreate。这就是为啥 setup 里拿不到 this——组件实例还没出生呢。

⚡ 效率提示：刚开始学别纠结“要不要完全放弃 Options API”，Vue3 是兼容的。小组件用 Options API 写也没问题，逻辑超过 3 个功能点的组件，再考虑用 Composition API 拆分，不然反而增加学习成本。另外，现在社区里大型项目基本都拥抱 Composition API 了，尤其是配合后面的