为你解读Vue3中的大热门——Composition API

最新推荐文章于 2024-09-13 22:31:51 发布

凃老师

最新推荐文章于 2024-09-13 22:31:51 发布

阅读量740

点赞数

本文链接：https://blog.csdn.net/tjx11111/article/details/105029324

版权

Vue3引入了Composition API，这是一种全新的代码组织和逻辑重用方法，解决了options API中JavaScript代码不直观的问题。通过将组件属性转化为JavaScript函数，提高了代码的可读性和可维护性。Composition API在代码重用方面具有优势，避免了混入和范围插槽的缺点，提供了更清晰的代码结构和更好的类型检查支持。

摘要由CSDN通过智能技术生成

作者：Filip Rakowski

翻译：启道学院

我们已经知道，在Vue的新版本中编写的应用程序将表现得非常好，但性能并不是最重要的部分。对我们开发人员来说最重要的是新版本将如何影响我们编写代码的方式。

正如你所预料的，Vue3带来了许多新的振奋人心的功能。幸运的是，Vue团队主要对当前的Composition API进行了添加和改进，而不是进行了重大更改，因此已经知道Vue2的人应该很快对新的语法感到满意。

让我们从大多数人可能听说的Composition API开始！

Composition API

下一个主要版本的Vue中讨论的最常见的就是Composition AP的特色语法的。这是一种全新的逻辑重用和代码组织方法。

目前，我们使用的是“options”API 构建组件。为了将逻辑添加到Vue组件中，我们填充（options）属性，如data、methods、computed等。这种方法最大的缺点是，它本身不是一个工作的JavaScript代码。您需要确切地知道模板中可以访问哪些属性以及this关键字的行为。在底层，Vue编译器需要将此属性转换为工作代码。正因为如此，我们无法从自动建议或类型检查中获益。

Composition API希望将通过当前组件属性、可用的机制公开为JavaScript函数来解决这个问题。 Vue核心团队将组件Composition API描述为“一套附加的、基于函数的api，允许灵活地组合组件逻辑”。使用Composition API编写的代码更易读，并且场景不复杂，这使得阅读和学习变得更容易。

让我们看到一个非常简单的组件示例，它使用新的组件Composition API来理解它是如何工作的。