Vue3组合式API的核心
以下是Vue3组合式API的核心使用方法和实践要点：
一、基础使用方式
组件定义
推荐使用
defineComponent()函数定义组件，支持类型推断和setup识别<script setup>语法糖可简化代码，自动添加导出语句
响应式数据
reactive()处理对象类型数据，直接返回响应式代理ref()处理基本类型数据，通过.value访问
import { reactive, ref } from 'vue'
const state = reactive({ count: 0 })
const num = ref(1)二、核心功能实现
生命周期
在setup中使用
onMounted等钩子函数
import { onMounted } from 'vue'
onMounted(() => { console.log('组件挂载') })计算属性
使用
computed()创建依赖响应式数据的计算值
const doubleCount = computed(() => count.value * 2)
监听器
watch()监听特定数据变化watchEffect()自动追踪依赖
watch(count, (newVal) => { console.log('count变化:', newVal) })三、高级特性
组件通信
defineProps定义接收的propsdefineEmits定义触发的事件
const props = defineProps(['title']) const emit = defineEmits(['update'])
逻辑复用
将相关逻辑抽离为自定义hook函数
// useCounter.js
export function useCounter(init) {
const count = ref(init)
const increment = () => count.value++
return { count, increment }
}四、项目实践建议
代码组织
相关功能代码集中维护（如数据+方法）
复杂组件建议按功能拆分多个hook
类型支持
配合TypeScript使用可获得更好的类型推断
interface User {
name: string
age: number
}
const user = reactive<User>({ name: '', age: 0 })注意：组合式API特别适合中大型项目，能显著提升代码可维护性和复用性对于简单组件，仍可使用选项式API
