AI问答-Vue 3-Composition API：理解Composition API / Composition API 是 Vue 3 引入的一项革命性功能

Vue 3 Composition API 深入理解

Composition API 是 Vue 3 引入的一项革命性功能，它彻底改变了 Vue 应用的组织方式，提供了更灵活、更可复用的代码组织方案。

一、核心概念

1.1、什么是 Composition API

Composition API 是一组基于函数的 API，允许你将逻辑组织到可复用的函数中（称为"组合函数"），而不是像 Options API 那样基于对象选项（data、methods、computed 等）来组织代码。

1.2、主要优势

更好的逻辑复用：通过组合函数，可以轻松复用状态逻辑

更灵活的代码组织：不再受限于选项顺序，可以按功能逻辑组织代码

更好的 TypeScript 支持：类型推断更准确，类型定义更简单

更小的组件体积：只导入需要的 API，减少打包体积

二、核心 API 详解

2.1、setup() 函数

import { ref, reactive } from 'vue'

export default {
  setup() {
    // 所有 Composition API 都在这里使用
    const count = ref(0)
    const state = reactive({ message: 'Hello' })
    
    function increment() {
      count.value++
    }
    
    return {
      count,
      state,
      increment
    }
  }
}

setup() 是组件的入口函数，在组件创建前执行

它是 beforeCreate 和 created 钩子之前执行的

必须返回对象或模板渲染函数（SFC 中通常返回对象）

2.2、响应式 API

2.2.1、ref()

import { ref } from 'vue'

const count = ref(0) // 创建响应式引用
console.log(count.value) // 访问值需要 .value
count.value++ // 修改值

用于创建基本类型的响应式数据

模板中访问时不需要 .value（Vue 会自动解包）

对象也可以使用 ref()，但通常推荐使用 reactive()

2.2.2、reactive()

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello'
})

state.count++ // 直接修改属性

用于创建响应式对象

返回一个 Proxy 对象

深度响应式（嵌套对象也会自动变为响应式）

2.2.3、computed()

import { ref, computed } from 'vue'

const count = ref(0)
const double = computed(() => count.value * 2)

创建计算属性

返回一个只读的响应式引用

也可以使用带 setter 的版本

2.2.4、watch() 和 watchEffect()

import { ref, watch, watchEffect } from 'vue'

const count = ref(0)

// watchEffect 自动追踪依赖
watchEffect(() => {
  console.log(`count changed: ${count.value}`)
})

// watch 显式指定依赖
watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`)
})

2.3、生命周期钩子

import { onMounted, onUpdated, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载')
    })
    
    onUpdated(() => {
      console.log('组件已更新')
    })
    
    onUnmounted(() => {
      console.log('组件已卸载')
    })
  }
}

命名方式为 onXxx

在 setup() 中使用

比 Options API 的钩子更早执行（在创建组件实例时注册）

2.4、提供/注入 (Provide/Inject)

// 父组件
import { provide, ref } from 'vue'

export default {
  setup() {
    const theme = ref('dark')
    provide('theme', theme)
  }
}

// 子组件
import { inject } from 'vue'

export default {
  setup() {
    const theme = inject('theme')
    return { theme }
  }
}

用于深层组件间通信

替代 Options API 中的 provide/inject 选项

组合函数 (Composables)

组合函数是 Composition API 的核心概念，它允许你将可复用的逻辑提取到单独的函数中。

示例：useCounter 组合函数

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

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

// 组件中使用
import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment, decrement, reset } = useCounter(10)
    
    return {
      count,
      increment,
      decrement,
      reset
    }
  }
}

三、与 Options API 的对比

特性	Composition API	Options API
代码组织	按功能逻辑组织	按选项类型组织（data、methods 等）
逻辑复用	通过组合函数轻松复用	通过 mixins 或高阶组件复用
TypeScript 支持	类型推断更好，类型定义更简单	类型推断较差，需要手动定义类型
响应式系统	使用 ref/reactive 等 API	使用 this 访问响应式数据
生命周期钩子	使用 onXxx 函数	使用 beforeCreate 等选项
模板访问	直接使用 setup 中返回的值	通过 this 访问

四、何时使用 Composition API？

1. 大型项目：当项目变得复杂时，Composition API 可以更好地组织代码
2. 逻辑复用：当有多个组件需要共享相同逻辑时
3. TypeScript 项目：Composition API 提供了更好的类型支持
4. 团队开发：当团队成员对代码组织方式有不同偏好时

五、迁移策略

1. 新项目：直接使用 Composition API
2. 现有项目：可以逐步引入 Composition API，与 Options API 混合使用
3. 混合使用：在同一个组件中可以同时使用两种 API

六、Composition API

Vue 3 的核心特性之一

提供了更灵活、更强大的代码组织方式

解决了 Options API 在逻辑复用和类型支持上的痛点

不是要完全取代 Options API，而是提供了另一种选择

特别适合大型项目和需要高度复用的场景