选项式api和组合式api

在 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，这样就可以灵活地结合两者的优点。