Vue 3 是 Vue.js 框架的最新版本，与 Vue 2 相比，它引入了一些重要的变化和改进。今天我们重点要讲的是vue3的组合式API与vue2的选项式API。

比较

Options API 是 Vue 2 中使用的传统方式，它通过一个包含不同选项的对象来定义组件。每个选项对应着一个生命周期钩子、数据、计算属性、方法等。这种方式适合简单的组件，但随着组件逻辑的复杂性增加，代码可能变得难以组织和维护。

而 Composition API 是 Vue 3 引入的一种新的 API 风格，它基于函数和逻辑组合的思想，使得组件的逻辑更加灵活和可组合。使用 Composition API，你可以将相关的逻辑组织在一起，而不是按照选项的形式分散在不同的函数中。

下面是一个示例，展示了 Options API 和 Composition API 的对比：

Options API 示例（Vue 2）：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'Updated Message';
    }
  }
};
</script>

在template中，定义了一个 <div> 元素，其中包含一个 <p> 元素和一个按钮元素。{{ message }} 是一个插值表达式，用于显示组件的 message 数据。

在script中，通过 export default 导出了一个对象，其中包含了组件的选项。data 函数返回了一个包含 message 属性的对象，该属性用于存储组件的数据。methods 中定义了一个名为 changeMessage 的方法，该方法将 message 数据更新为 "Updated Message"。

当用户点击按钮时，changeMessage 方法会被调用，从而更新组件的 message 数据，并且该数据的变化会自动地反映到模板中。

Composition API 示例（Vue 3）：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

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

export default {
  setup() {
    const message = ref('Hello, Vue!');

    function changeMessage() {
      message.value = 'Updated Message';
    }

    return {
      message,
      changeMessage
    };
  }
};
</script>

在template中，和之前一样，定义了一个 <div> 元素，其中包含一个 <p> 元素和一个按钮元素。{{ message }} 是一个插值表达式，用于显示组件的 message 数据。

在script中，通过 import 引入了 Vue.js 3 的 ref 方法，用于创建一个响应式的数据。然后，通过 setup 函数来设置组件的逻辑，这是 Composition API 的核心。

在 setup 函数中，首先使用 ref 创建了一个名为 message 的响应式数据，并将其初始值设置为 "Hello, Vue!"。然后，定义了一个名为 changeMessage 的函数，该函数将 message 数据更新为 "Updated Message"。这里需要注意的是，由于 message 是一个响应式数据，所以我们需要通过 message.value 来访问它的值。

最后，在 setup 函数中，通过 return 返回了一个对象，该对象包含了 message 和 changeMessage 两个属性。这些属性可以在template模板中使用，从而实现了数据和方法的绑定。

可以看到，Options API 中使用了 data 选项来定义响应式数据，并在 methods 中定义了方法。而 Composition API 则使用 ref 创建了一个响应式的数据，并在 setup 函数中定义函数和返回值。

组合式API的优点

组合式 API 相比选项式 API 有几个优点：

更灵活和可组合：使用组合式 API 可以更灵活地组织组件的逻辑，将相关代码聚集在一起，便于阅读和维护。你可以根据功能或逻辑将代码块进行分组，而不是按照生命周期钩子或选项的顺序来组织代码。
更好的代码重用性：通过组合式 API，你可以将逻辑抽象为函数，并在需要的时候进行重用。这种方式更符合 JavaScript 函数式编程的思想，使得代码更易于测试和重构。
更容易共享逻辑：使用组合式 API，你可以更容易地共享逻辑代码，因为它更像普通的 JavaScript 函数，并且可以更轻松地在组件之间进行共享和复用。
更好的类型推断和编辑器支持：组合式 API 对于 TypeScript 和编辑器的支持更加友好，能够提供更准确的类型推断和代码提示，使得代码的健壮性和可维护性更高。

总而言之，组合式 API 提供了更清晰、更灵活、更易于维护的方式来组织组件的逻辑，尤其在大型应用中能够更好地发挥作用。当然，对于小型项目或者已经使用习惯 Options API 的开发者来说，Options API 依然是一个有效的选择。虽然 Vue 3 带来了很多改进，但它仍然与 Vue 2 兼容，并且可以逐步迁移到 Vue 3。

vue2的选项式API与vue3的组合式API有何不同？

比较

组合式API的优点