在 Vue 3 中，选项式 API（Options API）和 组合式 API（Composition API）是两种不同的编写组件的方式。Vue 3 引入了组合式 API，旨在改善 Vue 2.x 中的选项式 API 的一些限制，特别是在大型项目中，帮助开发者更好地组织和复用逻辑。以下是这两种 API 的详细对比和使用场景：
1. 选项式 API（Options API）
选项式 API 是 Vue 2.x 中的默认写法，也是在 Vue 3 中可以继续使用的传统 API。它通过定义多个选项对象来组织组件的逻辑，比如 data、methods、computed、watch 等。
示例代码（选项式 API）：
<template><div><h1>{{ title }}</h1><button @click="changeTitle">Change Title</button></div>
</template><script>
export default {data() {return {title: "Hello, Vue!"};},methods: {changeTitle() {this.title = "Title Changed!";}}
};
</script>
特点：
- 结构清晰：选项式 API 将组件的各个部分（如
data、methods、computed、watch）明确区分，代码结构容易理解。 - 开发上手简单：对于新手或小型项目来说，选项式 API 简单且直观。
- 逻辑分散：当组件变得复杂时，不同的逻辑可能会散布在多个选项中（例如，
data、computed、methods），这可能导致代码维护困难。
2. 组合式 API（Composition API）
组合式 API 是 Vue 3 中新增的特性，它通过函数的方式组织组件的逻辑。使用 setup 函数来定义组件的响应式数据、方法和计算属性等内容。
示例代码（组合式 API）：
<template><div><h1>{{ title }}</h1><button @click="changeTitle">Change Title</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const title = ref("Hello, Vue!");const changeTitle = () => {title.value = "Title Changed!";};return {title,changeTitle};}
};
</script>
特点：
- 逻辑复用：组合式 API 允许将逻辑提取到单独的函数中（例如，使用
use前缀的函数），使得代码更加模块化和可复用。 - 更好的类型推导：组合式 API 提供了更好的 TypeScript 支持，尤其是在定义响应式状态、计算属性等时，类型推导更加准确。
- 代码组织：可以按功能块（而不是按选项类型）来组织代码，避免逻辑分散。例如，你可以将所有与 “title” 相关的逻辑放在一个地方，而不是分散在
data、methods和computed中。 - 更高的灵活性：组合式 API 允许更灵活地控制生命周期、响应式状态等，适用于更复杂的逻辑和场景。
选项式 API vs 组合式 API
| 特性 | 选项式 API (Options API) | 组合式 API (Composition API) |
|---|---|---|
| 结构 | 通过不同的选项（data、methods、computed 等）组织组件 | 通过 setup 函数组织组件的逻辑，所有状态和方法在 setup 中定义 |
| 代码可读性 | 对于小型项目非常直观，适合快速开发和学习 | 需要一定的学习曲线，但提供了更高的灵活性和复用性 |
| 逻辑复用 | 逻辑分散，难以复用 | 逻辑封装在函数中，易于复用 |
| 类型支持 | TypeScript 支持较弱 | TypeScript 支持更强，类型推导更准确 |
| 适用场景 | 适用于简单和小型组件 | 适用于复杂的组件，或需要复用逻辑的中大型应用 |
何时使用选项式 API 或 组合式 API？
-
选项式 API：适用于简单、轻量级的项目，或者开发团队比较熟悉选项式 API 的情况。它的优势是快速上手，结构清晰，适合小型应用和初学者。
-
组合式 API：适用于大型项目、复杂逻辑的组件、需要高度复用的代码以及需要更好的 TypeScript 支持的场景。组合式 API 提供更高的灵活性，使得逻辑的复用和组织更加高效。
混合使用
在 Vue 3 中，选项式 API 和 组合式 API 可以一起使用。你可以在 setup 函数中使用组合式 API，同时在组件中使用选项式 API 来保持兼容性，尤其是在迁移旧项目时。
示例（混合使用）：
<template><div><h1>{{ title }}</h1><button @click="changeTitle">Change Title</button></div>
</template><script>
import { ref } from 'vue';export default {data() {return {message: "Hello from data!"};},setup() {const title = ref("Hello, Vue with Composition API!");const changeTitle = () => {title.value = "Title Changed!";};return {title,changeTitle};}
};
</script>
在这个例子中，data 仍然使用了选项式 API，而 setup 使用了组合式 API，这样就可以灵活地结合两者的优点。
总结
- 选项式 API：结构清晰，适用于小型项目或快速开发，容易上手。
- 组合式 API：更适用于复杂的逻辑和大型应用，具有更好的灵活性和复用性，特别是对 TypeScript 更友好。
选择哪种方式取决于项目的规模和需求，Vue 3 允许你根据实际情况选择或混合使用这两种 API。