组合式api

Posted 2023-03-30

参考技术A

setup 函数 是 Vue3 中新增的函数，它是我们在编写组件时，使用 Composition API 的入口。
同时它也是 Vue3 中新增的一个生命周期函数，会在 beforeCreate 之前调用。因为此时组件的 data 和 methods 还没有初始化，因此在 setup 中是不能使用 this 的。所以 Vue 为了避免我们错误的使用，它直接将 setup 函数中的 this 修改成了 undefined 。并且，我们只能同步使用setup函数，不能用 async 将其设为异步。

选项式 API 和组合式 API的区别

Vue 的组件可以按选项式 API 和组合式 API两种不同的风格书写。

选项式 API (Options API)
选项式 API，可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

组合式 API (Composition API)
组合式 API，可以使用导入的 API 函数来描述组件逻辑，是一系列 API 的集合，可以使用函数的方式书写 Vue 组件。
组合式 API 的风格是基于函数的组合，但组合式 API 并不是函数式编程。组合式 API 是以 Vue 中数据可变的、细粒度的响应性系统为基础的，而函数式编程通常强调数据不可变。
在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际上，选项式 API 是在组合式 API 的基础上实现的。

选项式 API 易于学习和使用（写代码的位置已经约定好了）。缺点是，代码组织性差，相似的逻辑代码不便于复用，逻辑复杂、代码多了不好阅读。虽然提供了 mixins 用来封装逻辑，但是出现数据函数覆盖的概率很大，不好维护。

组合式 API的学习成本可能会增加，需要良好的代码组织能力和拆分逻辑能力。优点是：

1. 提供了更好的逻辑复用：能够通过“组合函数”来实现更加简洁高效的逻辑复用。“组合式函数”（-Composables） 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。
2. 具有更灵活的代码组织：与同一个逻辑关注点相关的代码可以放在一起，不需要再为了一个逻辑关注点在不同的选项块间来回滚动切换。随时将功能的一部分拆分出去。
3. 具有更好的类型推导
4. 可生成更小的生产包体积：由于 <script setup> 形式书写的组件模板被编译为了一个内联函数，和 <script setup> 中的代码位于同一作用域。不像选项式 API 需要依赖 this 上下文对象访问属性，被编译的模板可以直接访问 <script setup> 中定义的变量，无需一个代码实例从中代理。这对代码压缩更友好，因为本地变量的名字可以被压缩，但对象的属性名则不能。

可以在一个选项式 API 的组件中通过 setup() 选项来使用组合式 API。然而，只推荐在一个已经基于选项式 API 开发了很久、但又需要和基于组合式 API 的新代码或是第三方库整合的项目中这样做。