Vue Composition API
Vue Composition API 是 Vue 3 引入的一套全新的 API 风格,旨在解决复杂组件的代码组织问题,提高逻辑复用性
以下是其核心要点:
基本概念
通过函数式编程替代选项式声明,将同一功能的代码聚合在一起
核心函数包括:
ref()
、reactive()
、computed()
等响应式API,以及onMounted()
等生命周期钩子主要入口是
setup()
函数,可替代大部分选项式API的功能
核心优势
逻辑复用:通过自定义Hook实现跨组件逻辑共享
代码组织:按功能而非选项类型组织代码,解决Options API的分散性问题
类型支持:完美兼容TypeScript类型推断
渐进式:可与Options API混合使用
关键API对比
ref()
:处理基本类型响应式数据,需通过.value
访问reactive()
:处理对象类型响应式数据toRef/toRefs
:解构响应式对象时保持响应性生命周期钩子:前缀改为
on
(如onMounted
)
企业级实践
自定义Hook封装业务逻辑(如表单验证、登录逻辑)
与TypeScript深度集成实现类型安全
通过
provide/inject
实现依赖注入
迁移策略
新项目推荐使用
<script setup>
语法糖旧项目可逐步迁移,先用于新功能开发
Composition API特别适合大型项目开发,能显著提升代码可维护性和团队协作效率
其设计思想类似于乐高积木,通过组合函数构建复杂逻辑