前言

Vue3为我们开发提供了两种组件逻辑实现方式：选项式API和组合式API，为我们开发者提供了更多的选择和灵活性

本文将尝试为大家分析什么是选项式API和组合式API，以及两种API的优缺点

一、选项式API

1.1 选项式API

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

选项式API是一种基于选项对象的组件编写方式，通过在组件选项中定义data、computed、methods等属性来组织组件的逻辑。

通过选项式API，我们可以很方便地定义组件的数据和方法，并在模板中进行使用。

1.2 示例

vue 复制代码

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3!',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>
<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>

1.3 优缺点

1.3.1 优点

简单易学：选项式API是VueJS早期版本的传统编写方式，对于已经熟悉Vue2的开发者涞水，迁移到Vue3的选项是API较为容易，无需学习新的概念和语法
IDE支持良好：由于选项API使用了对象字面量的形式来定义组件选项，IDE工具对于代码语法高亮、代码提示和静态分析支持较好，开发体验较为友好
文档和资源丰富：选项是API是VueJS较早版本的主流编写方式，因此相关的文档、教程和社区资源丰富，开发者可以轻松找到所需的帮助和解决方案
直观易懂：选项式API将组件的不同选项（如data、methods、computed等）集中在一个对象中，使得组件的结构和功能一目了然，易于理解和维护
对于小型项目和快速原型开发更友好：选项式API适用于简单和小型的项目，以及对于快速原型开发，可以快速构建出组件并实现基本功能

1.3.2 缺点

灵活性差：选项式API在组织和复用逻辑方面相对于较为受限，随着项目规模和复杂度的增加，可能会导致组件代码冗长和难以维护
逻辑复用困难：在选项式API中，将逻辑复用的粒度较大，很难在不同组件之间共享和复用小型的逻辑块，可能导致代码冗余
难以进行单元测试：由于选项式API将逻辑分散在不同的选项中，单独测试某个逻辑块变得困难，需要依赖整个组件实例的上下文
代码组织较为分散：在选项式API中，相关的逻辑和数据分散在不同的选项中，可能导致代码的组织和阅读不够紧促和直观

二、组合式API

2.1 组合式API是什么？

组合式API是Vue3提供的一种基于函数的组件编写方式，通过使用一组函数来组织和复用组件的逻辑。它提供了一种更灵活、更可组合的方式来编写组件。

以下内容来自于官方：

组合式API（Composition API）是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语，涵盖了以下方面的API：

响应式API ：例如 ref() 和 reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。
生命周期钩子 ：例如 onMounted() 和 onUnmounted()，使得我们可以在组件各个生命周期阶段添加逻辑
依赖注入 ：例如 provide() 和 inject()，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。

另外，我们可以了解的一点是，组合式API不仅是 Vue3 的内置功能，在Vue2.7中就已经是内置了

通过组合式API，我们可以将相关的逻辑组织为函数，使得代码更加模块化、可复用和可测试。我们可以在setup函数中使用任何JavaScript语法。包括条件语句、循环等，来处理组件的逻辑。这种编写方式使得我们能够更好地组织和管理组件的功能，提高代码的可维护性和可读性

2.2 示例

vue 复制代码

import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue3!');
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      message,
      count,
      increment
    };
  }
};
</script>

2.3 优缺点

2.3.1 优点

代码组织和复用：组合式API允许将相关逻辑封装为函数，使得代码更加模块化和可复用，这样可以提高代码的组织性和可维护性
更灵活的逻辑复用：通过将逻辑抽象为函数，我们可以更方便地在不同组件之间进行逻辑复用，减少代码的冗余
更清晰的逻辑关系：组合式API使得组件的逻辑更加明确，每个函数都代表了特定的功能，使得代码更异步、更理解
更好的类型推导：组合式API兼顾了对TypeScript的支持，可以提供更好的类型推导和代码静态分析。这有助于在开发过程中捕获潜在的错误并增强代码的健壮性
更好的逻辑封装：组合式API使得逻辑可以更小的粒度进行封装，使得代码更加模块化和可维护。每个函数代表一个特定的功能，可以更容易的理解和修改逻辑
更好的响应式控制：组合式API提供了 ref 和 reactive 等响应式函数，可以更精细地控制数据的响应性。可以选择使用 ref 进行单一值的响应式，或者使用 reactive 进行对象的响应式

2.3.2 缺点

抽象程度：组合式API的灵活性也可能导致代码的抽象程度增加，有时可能会增加理解和维护的难度。在设计复杂的逻辑时，需要谨慎选择抽象的层次
可能导致函数爆炸：当逻辑复用的粒度过小或者过于具体时，可能会导致大量的小型函数，从而增加代码的复杂性和理解难度
学习成本：由于组合式API引入了一些新的概念和函数式编程的思维方式，学习成本可能会比较高。开发者需要熟悉Vue3的响应式系统、函数式编程的概念以及如何组织和组合函数
项目一致性：在团队开发中，如果不统一约定使用组合式API的风格，可能会导致代码风格和组织方式的不一致，增加沟通和维护的成本。

课堂问答

1. Vue3为什么要使用组合式API？

组合式API（Composition API）是什么？

组合式API（Composition API），是一系列 API 的集合，简单来说就是将同一逻辑关注点的代码配置在一起

主要目的是：
1. 为了增强代码的可读性和可维护性；
2. 允许相同逻辑代码在不同组件中进行完整复用
为什么要使用组合式API？
- 更好的逻辑复用 ：选项式API中我们主要的逻辑复用机制是 mixins ，但是 mixins 又有这三大主要短板：1）不清晰的数据来源。2）命名空间冲突。3）隐式的跨 mixins 交流
- 更灵活的代码组织：大部分代码都自然地被放进了对应的选项里
- 更好的类型推导：可以享受到完整的类型推导，不需要书写太多类型标注
- 更小的生产包体积 ：由于 <script setup> 形式书写的组件模板被编译为了一个内联函数，和 <script setup> 中的代码位于同一作用域。

【Vue】组合式API和选项式API

前言