Composition API 基础

什么是 Composition API

Composition API 是 Vue 3 新增的一组 API，允许我们更灵活地组织和复用组件逻辑。

基本使用

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

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

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

// 监听器
watch(count, (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`)
})

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

核心 API

响应式 API

• ref() - 创建响应式引用
• reactive() - 创建响应式对象
• computed() - 计算属性

生命周期钩子

• onMounted() - 组件挂载后
• onUpdated() - 组件更新后
• onUnmounted() - 组件卸载前

相比 Options API 的优势

• 逻辑复用 - 通过组合函数轻松复用逻辑
• 类型推断 - 更好的 TypeScript 支持
• 代码组织 - 相关逻辑可以组织在一起
• 包体积 - 支持 tree-shaking，减少打包体积