什么是 Composition API
Vue 3 引入了 Composition API，这是一种新的组织组件逻辑的方式。与 Options API 相比，它提供了更好的代码组织和复用能力。
核心概念
ref 和 reactive
import { ref, reactive } from 'vue'
// ref 用于基本类型
const count = ref(0)
// reactive 用于对象
const state = reactive({
name: 'Vue 3',
version: '3.4'
})computed
计算属性让你可以声明式地定义依赖于其他状态的值：
import { ref, computed } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)watch
监听器让你在状态变化时执行副作用：
import { ref, watch } from 'vue'
const count = ref(0)
watch(count, (newValue, oldValue) => {
console.log(`count changed from ${oldValue} to ${newValue}`)
})为什么使用 Composition API
- 更好的类型推断 - 对 TypeScript 更友好
- 更灵活的代码组织 - 相关逻辑可以放在一起
- 更好的代码复用 - 通过 composables 轻松复用逻辑
总结
Composition API 是 Vue 3 的核心特性之一，掌握它能让你写出更清晰、更可维护的代码。