选项式 API

选项式 API 是 Vue 2 中的传统方式，通过在组件对象中定义多个选项（如 data、methods、computed、mounted 等）来描述组件的逻辑。这些选项所定义的属性都会暴露在 this 上，this 指向当前的组件实例。

<template>
  <div>
    <p>{{ fullName }}</p>
    <button @click="updateName">Update Name</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
  },
  methods: {
    updateName() {
      this.firstName = 'Jane';
      this.lastName = 'Smith';
    },
  },
  mounted() {
    console.log('Component mounted');
  },
};
</script>

在这个示例中，data、computed、methods 和 mounted 都是选项式 API 的一部分，它们定义了组件的状态、计算属性、方法和生命周期钩子。

组合式 API

组合式 API 是 Vue 3 中引入的新方式，通过导入 Vue 的 API 函数（如 ref、computed、watch 等）来描述组件的逻辑。组合式 API 通常与 <script setup> 搭配使用，这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。

涵盖了以下方面的 API：

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

组合式 API 是 Vue 3 及 Vue 2.7 的内置功能。对于更老的 Vue 2 版本，可以使用官方维护的插件 @vue/composition-api。

<template>
  <div>
    <p>{{ fullName }}</p>
    <button @click="updateName">Update Name</button>
  </div>
</template>

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

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`;
});

const updateName = () => {
  firstName.value = 'Jane';
  lastName.value = 'Smith';
};
</script>

在这个示例中，我们使用了 <script setup> 和组合式 API。ref 用于定义响应式状态，computed 用于定义计算属性，updateName 是一个普通的函数。所有这些变量和函数都可以在模板中直接使用。

虽然这套 API 的风格是基于函数的组合，但组合式 API 并不是函数式编程。组合式 API 是以 Vue 中数据可变的、细粒度的响应性系统为基础的，而函数式编程通常强调数据不可变。

选项式 API vs 组合式 API

特性	选项式 API	组合式 API
代码组织	通过选项分组（data, methods 等）	通过逻辑分组（组合相关逻辑）
this 绑定	需要使用 this 访问组件实例	不需要 this，直接使用变量
类型推断	需要手动添加类型	更好地支持 TypeScript 类型推断
代码复用	通过 mixins 和继承	通过组合函数（composables）
学习曲线	对 Vue 2 用户更友好	对新用户可能有些复杂

组合式 API 的优势

1. 更好的代码组织：可以将相关逻辑组合在一起，而不是分散在不同的选项中。
2. 更好的类型推断：组合式 API 更好地支持 TypeScript，提供更好的类型推断。
3. 更灵活的代码复用：可以通过组合函数（composables）来复用逻辑，而不是依赖 mixins 和继承。
4. 更简洁的语法：使用 <script setup> 可以让代码更简洁，减少样板代码。

可以在同一个组件中使用两种 API 吗？​

可以。可以在一个选项式 API 的组件中通过 setup() 选项来使用组合式 API。

然而，只推荐你在一个已经基于选项式 API 开发了很久、但又需要和基于组合式 API 的新代码或是第三方库整合的项目中这样做。