Vue3组合式API的核心

以下是Vue3组合式API的核心使用方法和实践要点：

一、基础使用方式

1. 组件定义

• 推荐使用defineComponent()函数定义组件，支持类型推断和setup识别

• <script setup>语法糖可简化代码，自动添加导出语句

2. 响应式数据

• reactive()处理对象类型数据，直接返回响应式代理

• ref()处理基本类型数据，通过.value访问

import { reactive, ref } from 'vue'const state = reactive({ count: 0 })const num = ref(1)

二、核心功能实现

1. 生命周期

• 在setup中使用onMounted等钩子函数

import { onMounted } from 'vue'onMounted(() => { console.log('组件挂载') })

2. 计算属性

• 使用computed()创建依赖响应式数据的计算值

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

3. 监听器

• watch()监听特定数据变化

• watchEffect()自动追踪依赖

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

三、高级特性

1. 组件通信

• defineProps定义接收的props

• defineEmits定义触发的事件

const props = defineProps(['title'])const emit = defineEmits(['update'])

2. 逻辑复用

• 将相关逻辑抽离为自定义hook函数

// useCounter.jsexport function useCounter(init) {  const count = ref(init)  const increment = () => count.value++  return { count, increment }}

四、项目实践建议

1. 代码组织

• 相关功能代码集中维护（如数据+方法）

• 复杂组件建议按功能拆分多个hook

2. 类型支持

• 配合TypeScript使用可获得更好的类型推断

interface User {  name: string  age: number}const user = reactive<User>({ name: '', age: 0 })

注意：组合式API特别适合中大型项目，能显著提升代码可维护性和复用性对于简单组件，仍可使用选项式API