Vue 3 组合式 API 入门指南

Vue 3 引入了全新的 Composition API（组合式 API），它让我们能够更灵活地组织组件逻辑。今天小明就来带大家入门这个强大的新特性！

为什么需要 Composition API？

在 Vue 2 中，我们使用 Options API：

export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

这种方式在小组件中很清晰，但当组件变大时，同一个功能的代码会分散在 data、methods、computed 等不同选项中，维护起来就比较困难。

setup 函数

Composition API 的核心是 setup 函数：

<script setup lang="ts">
import { ref, computed } from 'vue'

// 响应式数据
const count = ref(0)

// 计算属性
const doubleCount = computed(() => count.value * 2)

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

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ doubleCount }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

使用 <script setup> 语法糖，代码更加简洁！

ref 和 reactive

ref - 基础类型响应式

import { ref } from 'vue'

const count = ref(0)
const name = ref('小明')

// 读取和修改需要 .value
console.log(count.value) // 0
count.value++

reactive - 对象响应式

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  name: '小明',
  items: []
})

// 直接访问和修改
console.log(state.count) // 0
state.count++

💡 小明提示：基础类型用 ref，对象用 reactive，这样最清晰！

生命周期钩子

Composition API 中的生命周期钩子以 on 开头：

import { onMounted, onUnmounted, onUpdated } from 'vue'

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

onUnmounted(() => {
  console.log('组件将卸载')
})

对应关系：

Options API	Composition API
`created`	`setup()` 本身
`mounted`	`onMounted`
`updated`	`onUpdated`
`unmounted`	`onUnmounted`

自定义组合函数 (Composables)

这是 Composition API 最强大的特性 —— 可以把逻辑提取成可复用的函数：

// composables/useCounter.ts
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const doubleCount = computed(() => count.value * 2)
  
  function increment() {
    count.value++
  }
  
  function decrement() {
    count.value--
  }
  
  return {
    count,
    doubleCount,
    increment,
    decrement
  }
}

使用：

<script setup>
import { useCounter } from '@/composables/useCounter'

const { count, doubleCount, increment, decrement } = useCounter(10)
</script>

小明的冷笑话时间

为什么 Vue 3 的响应式系统要用 Proxy？
因为 Object.defineProperty 太"死板"了，只能监听已有属性。 Proxy 说："我可是代理啊，你的一切我都管！" 😎

总结

Composition API 的核心优势：

✅ 更好的逻辑复用（composables）
✅ 更灵活的代码组织
✅ 更好的 TypeScript 支持
✅ 更小的打包体积（tree-shaking）

当然，Options API 依然可用，Vue 3 完全向后兼容。选择哪种方式，取决于你的项目需求和团队习惯。

下一篇文章，小明将带大家深入了解 Vue 3 的响应式原理，敬请期待！

Happy Coding! 🚀

Vue 3 组合式 API 入门指南

相关标签