本人github
Vue 3 引入的 Composition API 是一种新的编写组件的方法，旨在提供更灵活的组织组件逻辑的方式。与 Vue 2 中的 Options API 相比，Composition API 提供了更好的逻辑重用和代码组织能力，特别适合用于构建复杂组件或应用。
主要特点
-
基于函数的 API：Composition API 主要通过函数来构建组件的逻辑，使得相关的代码更容易组织在一起，而不是分散在
data,methods,computed等选项中。 -
响应式引用：通过
ref和reactive函数创建响应式变量，可以更灵活地处理组件的响应式状态。 -
组合逻辑：可以将相关的功能逻辑组合到一起（即“组合”），这有助于逻辑重用和代码维护。
-
更好的 TypeScript 支持：由于 Composition API 是基于函数的，它提供了更好的 TypeScript 集成，使类型检查和类型推断更加容易实现。
-
生命周期钩子：提供了与 Vue 2 类似的生命周期钩子，但以
on开头的函数形式，如onMounted,onUpdated等。
基本用法示例
<template>
<div>{
{ count }} {
{ doubleCount }}</div>
</template>
<script>
import { ref, computed, onMounted } from 'vue';
export default {
setup() {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
onMounted(() => {
console.log('Component is mounted!');
});
return { count, doubleCount };
},
};
</script>
在这个示例中，count 是一个响应式引用，doubleCount 是一个计算属性。所有逻辑都包含在 setup 函数中，这是使用 Composition API 的标准做法。
为什么使用 Composition API
Composition API 的主要优势在于它提供了更好的逻辑组织和代码重用能力。特别是在构建大型应用或复杂组件时，它能帮助开发者将相关逻辑组织在一起，使得代码更加清晰易懂。此外，对于 TypeScript 用户来说，它还提供了更好的类型支持。