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

总结

• 选项式 API：结构清晰，适用于小型项目或快速开发，容易上手。
• 组合式 API：更适用于复杂的逻辑和大型应用，具有更好的灵活性和复用性，特别是对 TypeScript 更友好。

选择哪种方式取决于项目的规模和需求，Vue 3 允许你根据实际情况选择或混合使用这两种 API。