为什么Vue3使用 Composition API

2023-05-02 447 阅读6分钟

Vue 3 引入了 Composition API 作为一种新的、可选的编程范式，主要是为了解决 Vue 2 中的一些问题和局限性。以下是 Vue 3 使用 Composition API 的几个主要原因：

易于阅读和维护：由于 Composition API 的代码组织方式更加模块化，因此更容易阅读和维护。在大型项目中，这有助于提高开发团队的协作效率和代码质量。
逻辑复用和代码组织：在 Vue 2 中，使用 mixins 和高阶组件（HOCs）可以实现一定程度的逻辑复用，但这些方法可能会导致命名冲突和不清晰的数据来源。Composition API 提供了一种更加灵活和可扩展的方式来复用和组织代码，使开发者能够更容易地在组件之间共享和组合逻辑。
更好的类型推断：Vue 3 的 Composition API 支持更强大的类型推断，使得 TypeScript 用户能够更方便地使用 Vue。这使得 Vue 3 项目在类型安全性和代码智能方面更加可靠，从而提高了开发效率。
更优的性能：Vue 3 的设计使得它在性能方面有所提升，特别是在响应式系统和虚拟 DOM 方面。Composition API 允许开发者更精确地控制响应式依赖项，从而实现更高的性能。
逐渐迁移的支持：虽然 Vue 3 引入了 Composition API，但它依然兼容 Vue 2 的 Options API，这意味着开发者可以逐步在项目中引入 Composition API，而无需立即进行大规模的重构。

这里将详细介绍前两个：

大型组件可能难以阅读和维护

为了解决这个问题，我们举个例子：掘金首页的搜索组件。

这个组件的代码，使用标准的 Vue 组件语法，看起来像这样：

当我们还想向该组件添加对搜索结果进行排序的功能时，我们的代码类似下面这样：

到目前感觉还不错，但当我们想向同一组件添加搜索过滤器和分页功能时，问题就出现了。这些新功能会被拆分成代码片段分布在组件的选项中（components, props, data, computed, methods,生命周期钩子）。如果我们使用颜色（如下左图）将其可视化，会发现非常分散，从而使我们的组件更难以阅读，很难解析哪些代码与哪些功能相关。

而从逻辑上讲，其分布应该像图后半部分才合理（右图），如果我们可以将我们的功能代码放在一起，我们的代码将更具可读性，从而更易于维护。如果我们使用composition API 进行编写，它会是这样的：

要使用 setup() 方法（如上所示）执行此操作，我们需要使用新的 Vue 3 composition API。setup()中的代码是一种新语法，同时这种新语法是可选的，编写Vue组件的标准方式仍然有效。

当我第一次看到setup时，我其实是有疑问的：“这样写是否意味着创建了一个巨大的setup方法，并将我所有的代码都放在那里？怎么会这样呢？”

情况并不是我想的这样，当我们在使用 Composition API 按功能组织组件时，你会将功能分组到组合函数中，然后在 setup 方法中调用这些组合函数，如下所示：

通过这种方式，我们的组件现在可以按照逻辑关注点（也称为“功能”）进行组织。然而，这并不意味着我们的用户界面将由更少的组件组成。我们仍然会使用良好的组件设计模式来组织应用程序：

现在我们已经了解了组合式 API 如何让您使大型组件更具可读性和可维护性，接下来我们可以继续第二个问题。

在组件之间复用逻辑没有完美的方法

在 Vue 2 中，在组件之间复用代码有 3 种好的解决方案，但每种都有其局限性。让我们用我们的例子逐一介绍。

第一： Mixins。

优点：

Mixins 可以按功能组织。

不太好的地方：

它们容易冲突，你可能会遇到属性名称冲突。
Mixins 之间如何互动的关系不清晰，如果它们确实互动。
如果我想在其他组件中使用 Mixin，它们不容易复用。

下一个让我们看一下Mixin Factories，它是返回自定义版本的 Mixin 的函数。

正如您在上面看到的，Mixin Factories 允许我们通过发送配置来自定义 Mixins。现在我们可以配置此代码在多个组件使用。

优点

现在我们可以配置代码，因此很容易重用。
我们的 Mixins 交互方式有更明确的关系。

不太好的地方

命名空间需要强大的约定和规范。
我们仍然有隐式属性添加，这意味着我们必须查看 Mixin 内部以弄清楚它公开了哪些属性。
在运行时没有实例访问，因此无法动态生成 Mixin 工厂。

幸运的是，还有一种通常最有用的解决方案，即Scoped Slots（作用域插槽）：

优点

几乎解决了 Mixins 的所有缺点。

不太好的地方

你的配置最终出现在你的模板中，理想情况下它应该只包含我们想要呈现的内容。
它们会增加模板中的缩进，从而降低可读性。
公开的属性仅在模板中可用。
由于我们使用 3 个组件而不是 1 个，因此性能稍差

正如您所见，每个解决方案都有局限性。 Vue 3的Composition API 为我们提供了第四种提取可重用代码的方法，它可能看起来像这样：

现在我们正在使用 Composition API 在函数内部创建组件，这些函数将被导入并在我们的 setup 方法中使用，这里我们可以进行所需的任何配置。

优点

我们编写的代码更少，所以将组件的功能提取到函数中会更容易。
它建立在你现有的技能基础上，因为你已经熟悉函数。
由于它们只是函数，所以比 Mixins 和作用域插槽更灵活。
可以在编辑器中使用智能感知、自动完成和类型提示

不太好的地方

需要学习新的低级 API 来定义组合函数。
现在有两种方法来编写组件，而不仅仅是标准语法。