选项式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 或 组合式 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。