FrontEnd Interview

Appearance

Vue3 Composition API：从设计思想到实战价值 ​

Vue3的Composition API是Vue团队对组件逻辑组织方式的一次重要革新。它并非否定Options API，而是针对复杂场景提供了更灵活的代码组织方案。理解其设计思想和优势，能帮助开发者在不同场景下做出更合理的技术选择。

一、Composition API的设计思想：逻辑为中心的组织方式 ​

Composition API的核心设计思想是**“按业务逻辑聚合代码”**，而非按“代码类型”（如数据、方法、生命周期）拆分。这种思想源于对大型应用开发痛点的解决：当组件复杂度提升时，Options API中分散在data、methods、mounted等选项中的相关逻辑，会变得难以追踪和维护。

举个直观的例子：一个包含“用户信息展示”和“订单列表加载”两个功能的组件，在两种API中的代码分布对比：

  • Options API：相关逻辑被拆分到不同选项，同一功能的代码被“打散”

    javascript
    export default {
  data() {
    return {
      // 功能1：用户信息
      user: null,
      // 功能2：订单列表
      orders: [],
      loading: false
    }
  },
  methods: {
    // 功能1：用户信息
    fetchUser() { /* ... */ },
    // 功能2：订单列表
    fetchOrders() { /* ... */ }
  },
  mounted() {
    // 功能1：用户信息
    this.fetchUser()
    // 功能2：订单列表
    this.fetchOrders()
  }
}

  • Composition API：同一功能的代码被“聚合”在一起

    javascript
    export default {
  setup() {
    // 功能1：用户信息相关逻辑（数据+方法+生命周期）
    const user = ref(null)
    const fetchUser = () => { /* ... */ }
    onMounted(fetchUser)
    
    // 功能2：订单列表相关逻辑（数据+方法+生命周期）
    const orders = ref([])
    const loading = ref(false)
    const fetchOrders = () => { /* ... */ }
    onMounted(fetchOrders)
    
    return { user, orders, loading }
  }
}

这种“逻辑聚合”的设计，让开发者能像“写脚本”一样组织组件代码，更符合人类对“功能模块”的认知习惯。

二、Composition API的核心概念 ​

1. setup：Composition API的入口 ​

setup是组件中使用Composition API的起点，它是一个特殊的函数，具有以下特性：

  • 执行时机：在组件实例创建前执行（介于beforeCreate和created之间），因此无法访问this（组件实例尚未生成）。

  • 返回值：返回的对象会暴露给模板和组件的其他选项（如methods），返回的函数可直接在模板中调用。

  • 参数：接收两个参数：

    • props：组件接收的 props（响应式，不可解构，否则失去响应性）
    • context：包含attrs、slots、emit等组件上下文信息
    vue
    <template>
  <p>{{ message }}</p>
  <button @click="handleClick">点击</button>
</template>

<script>
export default {
  props: {
    id: { type: Number, required: true }
  },
  setup(props, context) {
    // 访问props（必须通过props.id，不能解构）
    console.log('ID:', props.id)
    
    // 响应式数据
    const message = ref('Hello')
    
    // 方法
    const handleClick = () => {
      context.emit('custom-event', message.value) // 触发事件
    }
    
    return { message, handleClick } // 暴露给模板
  }
}
</script>

在Vue3的<script setup>语法糖中，setup的参数自动注入，无需显式声明，进一步简化代码：

vue

<script setup>
  import {ref} from 'vue'
  // props通过defineProps声明
  const props = defineProps({id: Number})
  // emit通过defineEmits声明
  const emit = defineEmits(['custom-event'])

  const message = ref('Hello')
  const handleClick = () => {
    emit('custom-event', message.value)
  }
</script>

2. 响应式API：构建响应式状态的工具集 ​

Composition API提供了一套更精细的响应式API，替代了Options API中data函数的角色：

API作用适用场景
ref包装基本类型（Number/String/Boolean）为响应式对象简单值（如计数器、开关状态）
reactive将对象转为响应式代理复杂对象（如用户信息、表单）
toRef将响应式对象的属性转为单独的ref需单独传递对象属性时
toRefs将响应式对象的所有属性转为ref对象集合解构响应式对象时保留响应性
computed创建计算属性依赖其他响应式数据的派生值

示例：响应式状态的创建与使用

vue

<script setup>
  import {ref, reactive, toRefs, computed} from 'vue'

  // 1. 基本类型响应式
  const count = ref(0)
  count.value++ // 访问/修改需通过.value

  // 2. 对象类型响应式
  const user = reactive({
    name: '张三',
    age: 20
  })
  user.age = 21 // 直接修改属性

  // 3. 解构响应式对象（toRefs避免失去响应性）
  const {name, age} = toRefs(user)
  // 此时name和age是ref对象，可在模板中直接使用

  // 4. 计算属性
  const isAdult = computed(() => age.value >= 18)
</script>

3. 生命周期钩子：与组件生命周期联动 ​

Composition API的生命周期钩子是独立的函数，需显式导入使用，对应Options API的生命周期选项：

Composition APIOptions API时机说明
onMountedmounted组件挂载后
onUpdatedupdated组件更新后
onUnmountedunmounted组件卸载后
onBeforeMountbeforeMount组件挂载前
onBeforeUpdatebeforeUpdate组件更新前
onBeforeUnmountbeforeUnmount组件卸载前
onErrorCapturederrorCaptured捕获子组件错误时

示例：生命周期钩子的使用

vue

<script setup>
  import {onMounted, onUnmounted, ref} from 'vue'

  const timer = ref(null)
  const count = ref(0)

  // 组件挂载后启动定时器
  onMounted(() => {
    timer.value = setInterval(() => {
      count.value++
    }, 1000)
  })

  // 组件卸载前清理定时器
  onUnmounted(() => {
    clearInterval(timer.value)
  })
</script>

4. 依赖注入：provide/inject的增强 ​

Composition API中，provide和inject可以直接在setup中使用，支持传递响应式数据，且类型推断更友好：

vue
<!-- 父组件：提供数据 -->
<script setup>
  import {provide, ref} from 'vue'

  const theme = ref('light')
  // 提供响应式数据
  provide('theme', theme)
  // 提供修改方法
  provide('setTheme', (newTheme) => {
    theme.value = newTheme
  })
</script>

<!-- 深层子组件：注入数据 -->
<script setup>
  import {inject} from 'vue'
  // 注入数据（第二个参数为默认值）
  const theme = inject('theme', ref('light'))
  const setTheme = inject('setTheme')

  // 使用注入的数据
  const toggleTheme = () => {
    setTheme(theme.value === 'light' ? 'dark' : 'light')
  }
</script>

三、逻辑复用：从mixin到组合式函数 ​

逻辑复用是Composition API最核心的优势之一。Options API中通过mixin复用逻辑，但存在命名冲突、逻辑分散、依赖隐蔽 等问题；而Composition API通过组合式函数（Composables） 实现更清晰的逻辑复用。

1. 组合式函数的定义与使用 ​

组合式函数是一个封装了响应式状态和逻辑的函数，命名通常以use开头（如useMouse、useStorage），返回需要暴露的响应式数据和方法。

示例：封装鼠标位置监听逻辑

javascript
// composables/useMouse.js（组合式函数）
import {ref, onMounted, onUnmounted} from 'vue'

export function useMouse() {
    // 封装内部状态
    const x = ref(0)
    const y = ref(0)

    // 封装内部方法
    const updatePosition = (e) => {
        x.value = e.pageX
        y.value = e.pageY
    }

    // 封装生命周期逻辑
    onMounted(() => {
        window.addEventListener('mousemove', updatePosition)
    })

    onUnmounted(() => {
        window.removeEventListener('mousemove', updatePosition)
    })

    // 暴露需要外部使用的状态和方法
    return {x, y}
}

在组件中复用逻辑：

vue

<template>
  <p>鼠标位置：({{ x }}, {{ y }})</p>
</template>

<script setup>
  // 直接导入并调用组合式函数，逻辑清晰
  import {useMouse} from './composables/useMouse'

  const {x, y} = useMouse()
</script>

2. 组合式函数的优势 ​

  • 无命名冲突：通过变量解构显式接收，避免mixin中“隐式合并”导致的命名冲突；
  • 逻辑溯源：组件中使用的逻辑可直接追溯到组合式函数的定义，调试更简单；
  • 灵活组合：可在一个组件中调用多个组合式函数，且函数之间可相互依赖；
  • 类型友好：返回值类型明确，配合TypeScript时自动推导，无需额外类型声明。

四、与Options API的核心差异与优势 ​

维度Options APIComposition API优势总结
代码组织按选项（data/methods/mounted）拆分按业务逻辑聚合复杂组件中逻辑更易维护
逻辑复用依赖mixin，存在命名冲突和隐式依赖基于组合式函数，显式复用，无冲突复用逻辑更清晰，可维护性高
类型支持this指向模糊，TypeScript类型推导弱函数参数和返回值类型明确，推导友好更适合TypeScript项目
灵活性受选项结构限制，动态逻辑组合困难可像编写函数一样自由组合逻辑复杂场景下更灵活
学习成本低，结构固定，易于新手理解较高，需理解响应式API和函数组合长期看，复杂项目收益更高
适用规模小型组件/简单应用大型组件/复杂应用规模越大，Composition优势越明显

五、Composition API的适用场景与最佳实践 ​

1. 适用场景 ​

  • 复杂组件：包含多个独立功能模块（如表单+列表+图表的仪表盘组件）；
  • 逻辑复用需求高：多个组件需要共享相似逻辑（如权限控制、数据缓存）；
  • TypeScript项目：利用其良好的类型支持提升代码健壮性；
  • 大型应用：团队协作时，一致的逻辑组织方式可降低沟通成本。

2. 最佳实践 ​

  • 逻辑拆分：将组件拆分为多个组合式函数，每个函数专注于单一功能（单一职责原则）；
  • 目录规范：将组合式函数放在composables目录下，方便复用和管理；
  • 避免过度拆分：简单逻辑无需拆分为组合式函数，避免增加复杂度；
  • 响应式谨慎处理：解构reactive对象时必须用toRefs，否则失去响应性；
  • 避免setup过长：若setup函数代码过多，可拆分为多个组合式函数；
  • 优先使用<script setup>：语法糖简化代码，自动处理setup参数和返回值。

六、总结：并非取代，而是互补 ​

Composition API并非要取代Options API，而是Vue3提供的“更灵活的选择”：

  • 简单组件用Options API更简洁（如仅展示数据的卡片组件）；
  • 复杂组件用Composition API更易维护（如包含多逻辑的表单组件）。

其核心价值在于打破了Options API的“选项边界”，让开发者能按业务逻辑自由组织代码，同时提供了更高效的逻辑复用方式。对于中大型Vue项目，采用Composition API（配合<script setup>和组合式函数）能显著提升代码的可维护性和扩展性，这也是Vue团队推荐在复杂场景中优先使用它的原因。