在本教程中，我们将探索如何使用 Vue 3 Composition API及其最新的代码可重用性功能。 Backward Skip 10s Play Video Forward Skip 10s 代码共享和可重用性是软件开发的基石之一。从编程的早期开始，代码重复的问题就促使程序员发明了保持代码干燥、可重用和可移植的策略。随着时间的推移，这些策略不断被打磨和完善，新的策略不断被开发出来。 这同样适用于Vue以及其他编程语言和框架。随着 Vue 框架的发展，它不断提供更好的可重用性方法。 什么是 Composition API 以及创建它的原因 让我们考虑一下是什么使一段代码可重用。对我来说，可重用性有三个主要原则： 代码抽象。当一段代码可以适合多个不同的用例（如许多编程语言中的类）时，它就是抽象的。
代码可移植性。当一段代码不仅可以在一个项目的不同地方使用，而且可以在不同的项目中使用时，它就是可移植的。 代码解耦（或松耦合）。当更改一段代码不需要更改另一段代码时，这段代码就与另一段代码解耦了。它们尽可能相互独立。当然，完全解耦是不可能的——这就 决策者电子邮件列表 是为什么开发人员使用的更准确的术语是“松散耦合”。 Learn to Code with JavaScript Composition API 是用于构建和构建 Vue 3 组件的新策略。它结合了上述所有三个原则，并允许创建抽象的、可移植的和松散耦合的组件，这些组件可以在不同的项目之间重用和共享。 将 Vue Composition API 添加到框架的动机 将 Composition API 添加到 Vue 3 的动机非常明确和简单：生成更紧凑和碎片整理的代码。让我们进一步探讨一下。 当我第一次发现 Vue 时，我就被它的 Options（基于对象）API 迷住了。
在我看来，与 Angular 和 React 等价物相比，它更加清晰和优雅。一切都有它自己的位置，我可以把它放在那里。当我有一些数据时，我把它放在一个data选项中；当我有一些功能时，我将它们放在选项中methods，依此类推所有这些看起来都非常有序、干净且易于阅读和理解。然而事实证明，这仅在应用程序相对较小且简单时才有效。随着应用程序及其组件越来越多，代码碎片和无序性也随之增加。 当在大型项目中使用Options API时，代码库很快就开始变得像一个碎片化的硬盘。组件中逻辑上属于同一部分的不同代码部分分布在不同的地方。这使得代码难以阅读、理解和维护。 这就是 Composition API 发挥作用的地方。它提供了一种按顺序构建代码的方法，其中所有逻辑部分都组合在一起作为一个单元。在某种程度上，您可以将 Composition API 想象为磁盘碎片整理工具。