vue3 组合式 API 详解

✅ 一、什么是组合式 API（Composition API）？

Composition API 是 Vue 3 引入的一套新的组件编写方式。
它的核心思想是：

按“逻辑”组织代码，而不是按“选项（data / methods / computed ...）”组织代码。

传统 Options API 的代码是分散的，而 Composition API 把相关逻辑集中写在一起，更利于可维护、可拆分、可复用。

✅ 二、为什么要使用 Composition API？

1. 逻辑集中，不再分散在各个选项里

例如一个功能需要 data、methods、watch、computed
在 Options API 中会分散在不同的块：

• data()

• computed

• methods

• watch

而 Composition API 中可以集中放在 setup() 中。

2. 更强的逻辑复用（不再被 mixins 限制）

使用**组合函数（Composables）**可以像 React Hooks 一样复用逻辑。

3. 更适合 TypeScript

Composition API 更符合 TS 类型推断。

4. 更利于代码压缩与 tree-shaking

未使用的函数不会被打包。

✅ 三、Composition API 核心功能总览

✅ 四、Composition API 最重要的：setup()

Vue 3 组件使用 Composition API 时，逻辑基本写在 setup() 中：

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

const count = ref(0)

function increment() {
  count.value++
}

onMounted(() => {
  console.log('组件已挂载')
})
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

setup() 的特点

• 在组件创建之前执行

• 不能访问 this（与 Options API 完全不同）

• 返回的变量和方法才能在模板中使用

✅ 五、ref() —— 定义基本类型响应式数据

const count = ref(0)

ref 定义的变量需要通过 .value 访问：

count.value++
console.log(count.value)

✅ 六、reactive() —— 定义对象响应式数据

const state = reactive({
  name: 'Tom',
  age: 18
})

reactive 定义的对象不需要 .value：

state.age++

注意：reactive 只能用于对象

• 对基本类型无效（要用 ref）

ref vs reactive 对比

✅ 七、computed() —— 定义计算属性

const firstName = ref('Tom')
const lastName = ref('Jerry')

const fullName = computed(() => {
  return firstName.value + ' ' + lastName.value
})

支持 getter / setter：

const fullName = computed({
  get() {
    return firstName.value + ' ' + lastName.value
  },
  set(value) {
    const parts = value.split(' ')
    firstName.value = parts[0]
    lastName.value = parts[1]
  }
})

✅ 八、watch 和 watchEffect

watch：指定侦听目标

watch(count, (newVal, oldVal) => {
  console.log('变化：', newVal)
})

侦听多个：

watch([count, firstName], ([newCount, newName]) => {
  console.log(newCount, newName)
})

watchEffect：自动依赖收集

不需要指定侦听目标：

watchEffect(() => {
  console.log('count is:', count.value)
})

适合副作用操作。

✅ 九、生命周期函数（组合式写法）

组合式 API 的生命周期函数全部以 onXxx 命名。

示例：

onMounted(() => {
  console.log('组件挂载了')
})

✅ 十、组件通信：props / emits

1. <script setup> 中使用 defineProps

<script setup>
const props = defineProps({
  title: String,
  age: Number
})
</script>

2. Emits

<script setup>
const emit = defineEmits(['update'])

function sendData() {
  emit('update', 123)
}
</script>

✅ 十一、组合逻辑复用：自定义组合函数（Composables）

可把可复用的逻辑抽成“函数”，像 React Hooks 一样。

示例：封装一个计数器逻辑

文件：useCounter.js

import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  const inc = () => count.value++
  const dec = () => count.value--

  return { count, inc, dec }
}

使用：

<script setup>
import { useCounter } from './useCounter'

const { count, inc, dec } = useCounter()
</script>

<template>
  <button @click="dec">-</button>
  {{ count }}
  <button @click="inc">+</button>
</template>

✅ 十二、Composition API 与 Options API 对比总结

🔥 十三、完整示例：计数器 + 计算属性 + watch

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

const count = ref(0)

const double = computed(() => count.value * 2)

watch(count, (n, o) => {
  console.log(`count: ${o} -> ${n}`)
})

function inc() {
  count.value++
}

onMounted(() => {
  console.log('组件挂载')
})
</script>

<template>
  <h1>Count: {{ count }}</h1>
  <h2>Double: {{ double }}</h2>
  <button @click="inc">增加</button>
</template>