vue3之Composition API

Composition API也叫组合式API，是Vue3.x的新特性。

通过创建 Vue 组件，我们可以将接口的可重复部分及其功能提取到可重用的代码段中。仅此一项就可以使我们的应用程序在可维护性和灵活性方面走得更远。然而，我们的经验已经证明，光靠这一点可能是不够的，尤其是当你的应用程序变得非常大的时候——想想几百个组件。在处理如此大的应用程序时，共享和重用代码变得尤为重要

创建一个可组合函数

创建一个简单的可组合函数。下面count是具有无功值的组件的示例。
使用Composition API的计数器示例

<script setup>
import { ref } from "vue";

const count = ref(0);
 
const increment = () => {
 count.value++;
};
</script>

<template>
  <button @click="increment">
    Clicked {{ count }} times
  </button>
</template>

Options API 表示法主要在 Vue 2 之前使用，它不允许您从组件中提取状态。然而，随着 Composition API 的出现，现在可以将状态提取到外部函数。这允许跨多个组件重用逻辑。

以下可组合函数是使用 Composition API将上述组件提取到外部useCounter()的示例。

useCounter.ts
import { ref } from "vue";

export const useCounter = () => {
  const count = ref(0);
 
  const increment = () => {
    count.value++;
  };

  return {
    count,
    increment,
  };
};

组件可以调用和使用它们。

APP.vue
<script setup>
import { useCounter } from "./useCounter";

const { count, increment } = useCounter();
</script>

useCounter()通过创建 ，不仅简化了组件内部的描述，而且好处是可以在其他组件中重用相同的逻辑。

通常，每次需要时都必须创建这样的可组合函数，但人们已经意识到存在经常使用的可组合函数。