构图API在VUE中引入了2.7版本以替换选项API。

是反应性api （'ref'和'reactive'），以声明反应性状态，而不是选项API中的数据功能。

这个新的API是 Composables的骨干。

什么是组合？

组合是基于反应性API的函数，遵循特定的结构，使开发人员可以 独立 与组件的状态或无状态逻辑。

此外，逻辑本身可以在不同的组合中分配并嵌套在一起以实现特定的任务，因为组合是通过参数'可延展性'的事实。

组合示例：

合并有三个主要部分：

内部状态： 与该功能相关的任何状态。
将使用'ref'或'reactive'进行反应的状态。

尽管如此，建议使用'ref'，因为它保留了反应性并与'reactive'相比，它可以直接破坏组件。

管理状态： 在操作发生时应用的逻辑

返回状态： 公开托管状态

合并返回具有单个值或多个值的对象，一个值可能是一种方法。

1.基本的组合

在下面的示例中， useIsUserActive 是一个可复合检查用户是否单击页面中的某个地方的组合。

然后在VUE组件中导入并执行。

2.与返回的方法合并：

让我们看看更复杂的示例：useTimer

此组合将充当我们可以通过不同方法控制的计时器：start，pause和stop。

3.与参数相关：

可以参数为以下示例。

此组合负责用特定的分离器替换字符串中的空间。

• data和separator是参数。

• watchEffect每当其依赖性之一变化时都会运行。没有watchEffect，即使data或separator已更改，我们的功能也只能在第一次运行。
  它的依赖性必须具有反应性才能能够完成这项工作，因此，data和separator必须是参考

• toValue是返回的函数：

1.源的nosalized value如果该源为ref。

2.执行源的功能并返回其值，如果
该来源是一个getter函数。

3.源的返回value如果该来源是标准化的
价值。

组合优势：

让我们在组件内部使用useTimer综合逻辑。

<script setup lang="ts">
import { ref } from "vue"

const timer = ref(0)
let myInterval: number

// start method
const start = () => {
  myInterval = setInterval(() => {
    timer.value = timer.value + 1
  }, 1000)
}

// pause method
const pause = () => {
  clearInterval(myInterval)
}

// stop method
const stop = () => {
  timer.value = 0
  clearInterval(myInterval)
}
</script>

<template>
  <main>
    {{ timer }}

    <button @click="start()">start</button>
    <button @click="pause()">pause</button>
    <button @click="stop()">stop</button>
  </main>
</template>

• 您会注意到组件不在乎计时器状态，那么组件可以访问计时器逻辑没有任何意义。

• 除非复制粘贴，否则您将无法重复使用此逻辑。

• 想象一下这个组件会变大，调试将更加困难。

您可能会注意到，此技术将提供 有关组件的 组件 复杂性 和 长度 。此外，更容易 调试 。

结论：

组合是 重用 和 封装 逻辑的新方法。他们从构图API 获得了将VUEJS应用程序提升到另一个级别的事物。

与他们的优势相比，实施组合，从几个项目中的个人使用中，既不要花费歧义也不要花费新的复杂性。

您在我的github中找到了上面的示例：Github