Vue3组合式API开发完全指南深度教程：2026年最新Composition API响应式系统生命周期钩子自定义hooks企业级项目实战免费开放接口API开发教程与实战案例深度解析大全完整版

一、Vue3组合式API概述

Vue3引入的组合式API（Composition API）是Vue.js发展史上的重要里程碑。与Options API相比，组合式API提供了更灵活的代码组织方式、更好的类型推导和更优的逻辑复用能力。

二、响应式系统

1. ref和reactive

ref用于创建基本类型的响应式数据，reactive用于创建对象类型的响应式数据：

import { ref, reactive } from 'vue'

// ref - 基本类型
const count = ref(0)
console.log(count.value) // 0

// reactive - 对象类型
const state = reactive({
  name: 'Vue3',
  version: '3.4'
})
console.log(state.name) // Vue3

2. computed计算属性

computed用于创建计算属性，具有缓存特性，只有依赖变化时才会重新计算：

import { ref, computed } from 'vue'

const firstName = ref('张')
const lastName = ref('三')

const fullName = computed(() => {
  return firstName.value + lastName.value
})

3. watch侦听器

watch用于侦听响应式数据的变化，执行副作用操作：

import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newVal, oldVal) => {
  console.log(`count从${oldVal}变为${newVal}`)
})

三、生命周期钩子

组合式API中的生命周期钩子以on开头，需要在setup中调用：

onMounted - 组件挂载后
onUpdated - 组件更新后
onUnmounted - 组件卸载前
onBeforeMount - 组件挂载前
onBeforeUpdate - 组件更新前
onBeforeUnmount - 组件卸载前

四、自定义Hooks

自定义hooks是组合式API的核心优势之一，可以将相关逻辑抽离为可复用的函数：

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

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

五、最佳实践

合理拆分逻辑，每个hook专注一个功能
使用TypeScript获得更好的类型支持
遵循hooks命名规范，以use开头
注意组件卸载时的清理工作
避免过度使用响应式，普通数据用普通变量

六、结语

Vue3组合式API为前端开发带来了全新的编程范式。通过合理使用组合式API和自定义hooks，可以编写出更清晰、更易维护、更易复用的Vue代码。