Vue Composition API

Vue Composition API 是 Vue 3 引入的一套全新的 API 风格，旨在解决复杂组件的代码组织问题，提高逻辑复用性

以下是其核心要点：

1. ‌基本概念‌

• 通过函数式编程替代选项式声明，将同一功能的代码聚合在一起

• 核心函数包括：ref()、reactive()、computed()等响应式API，以及onMounted()等生命周期钩子

• 主要入口是setup()函数，可替代大部分选项式API的功能

2. ‌核心优势‌

• ‌逻辑复用‌：通过自定义Hook实现跨组件逻辑共享

• ‌代码组织‌：按功能而非选项类型组织代码，解决Options API的分散性问题

• ‌类型支持‌：完美兼容TypeScript类型推断

• ‌渐进式‌：可与Options API混合使用

3. ‌关键API对比‌

• ref()：处理基本类型响应式数据，需通过.value访问

• reactive()：处理对象类型响应式数据

• toRef/toRefs：解构响应式对象时保持响应性

• 生命周期钩子：前缀改为on（如onMounted）

4. ‌企业级实践‌

• 自定义Hook封装业务逻辑（如表单验证、登录逻辑）

• 与TypeScript深度集成实现类型安全

• 通过provide/inject实现依赖注入

5. ‌迁移策略‌

• 新项目推荐使用<script setup>语法糖

• 旧项目可逐步迁移，先用于新功能开发

Composition API特别适合大型项目开发，能显著提升代码可维护性和团队协作效率

其设计思想类似于乐高积木，通过组合函数构建复杂逻辑