什么是选项式API？什么是组合式API?

在 Vue.js 中，组合式 API（Composition API）和选项式 API（Options API）是两种不同的编程范式，用于定义组件逻辑。它们各自有独特的特点和使用场景。

选项式 API (Options API)

选项式 API 是 Vue 2 中引入的传统方式，它通过一组预定义的选项来组织组件逻辑。每个选项都有特定的作用域，比如 data、methods、computed 等等。这种方式使得代码结构清晰，适合较小规模的应用程序。

优点：

• 对于简单的组件，选项式 API 提供了直观且易于理解的方式。
• 组件的各个部分（如数据、方法、计算属性等）被明确地分隔开，便于初学者理解和维护。

缺点：

• 在复杂的逻辑或多个逻辑需要共享的情况下，选项式 API 可能会导致代码分散，难以管理和复用。
• 当一个逻辑跨越多个生命周期钩子时，可能会导致代码的可读性和维护性下降。

示例：
 

export default {
  data() {
    return {
      message: 'Hello, Options API!',
    };
  },
  methods: {
    greet() {
      alert(this.message);
    },
  },
};

组合式 API (Composition API)

组合式 API 是 Vue 3 引入的新特性，旨在解决选项式 API 的一些局限性。它允许开发者以函数的形式编写逻辑，并通过 setup() 函数将逻辑导出给模板或其他组合逻辑。这种方式强调逻辑的复用性和模块化。

优点：

• 更好的逻辑复用：你可以将相关的逻辑提取到单独的函数中，然后在不同组件之间共享这些函数。
• 更灵活的代码组织：你可以在同一个 setup() 函数内处理所有的逻辑，而不需要将其拆分为多个选项。
• 支持 TypeScript：组合式 API 更加类型友好，有助于提高开发体验和代码质量。

缺点：

• 对于新用户来说，可能需要一些时间来适应这种新的编程模式。
• 对于小型组件，组合式 API 可能会显得过于复杂。

示例：
 

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

// 定义响应式数据
const count = ref(0);

// 定义方法
const increment = () => {
  count.value++;
};
</script>