为什么我钟爱Vue 3的Composition API - Michael Hoffmann

为什么选择Vue 3的Composition API？

在本文中，我将通过对比Vue 2中的Options API和Vue 3中的Composition API，向您展示如何构建组件，并解释为什么我更倾向于使用Composition API来开发Vue组件。

Vue 2中的Options API

在Vue 2中，我们通过Options API来构建组件，主要通过填充方法、数据、计算属性等选项来实现。以下是一个使用Options API的示例组件：

Options API的一个显著缺点是：逻辑分散在不同的选项之间。例如，过滤和排序等逻辑可能分布在多个部分，这种碎片化的结构会导致复杂组件的理解和维护变得困难。

示例：计数器组件的功能

一个简单的计数器组件可能包含以下功能：

使用count数据属性，并通过initialValue属性设置初始值。
使用计算属性countPow计算count的平方值。
通过监听器监控count值的变化，并触发“计数器更新”事件。
提供多种方法来修改count值。
在生命周期钩子mounted中输出日志信息。

Vue 3中的Composition API

Vue 3引入了Composition API，这是一种完全可选的构建方式。虽然Options API仍然可用，但Composition API提供了一种更灵活、更模块化的方式来构建组件。

Composition API的核心：setup方法

所有基于Composition API的组件都以setup方法为入口点。setup方法在组件创建之前执行，并在解析props之后调用。以下是setup方法的一些关键点：

避免在setup中使用this，因为它不会引用组件实例。
默认情况下，从setup返回的变量不是响应式的。
可以使用reactive将对象转换为响应式状态，或使用ref使单个值（如字符串、数字或布尔值）变为响应式。

import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const state = reactive({ count: 0 });    return { count, state };
  },
};

新增功能：更强大的工具支持

Vue 3还提供了许多新的方法，例如computed、watch和onMounted，这些方法可以在setup中实现与Options API相同的逻辑。

Composition API的优势

解决Options API的局限性

Options API存在以下问题：

无法通过参数动态调整mixin的逻辑，灵活性较低。
多个mixin可能导致属性名称冲突。
使用多个mixin时，难以明确属性的来源。

Composition API通过模块化的方式解决了这些问题，使逻辑更加清晰和可维护。

语法糖

Vue 3.2引入了<script setup>语法糖，进一步简化了Composition API的使用。这种语法具有以下优点：

支持使用TypeScript声明props和事件。
减少样板代码，代码更加简洁。
提升运行时性能，模板直接编译为渲染函数。
改善IDE类型推理性能。



import { ref } from 'vue';

const count = ref(0);

为什么我钟爱Composition API？

以下是我喜欢Composition API的几个原因：

更高的可读性和可维护性：通过逻辑关注点分离，代码更加模块化。
无需使用this关键字：支持箭头函数和函数式编程。
更清晰的上下文：只能访问从setup返回的内容，避免混乱。
TypeScript支持：Vue 3完全支持TypeScript，与Composition API完美结合。
易于测试：组合函数可以单独进行单元测试。

Composition API与Options API的对比

下图展示了一个大型组件中，使用Options API和Composition API的逻辑分组对比：

从图中可以看出，Composition API通过将逻辑分组，大幅提升了代码的可维护性，尤其是在处理复杂组件时。

总结

虽然Options API对于初学者更友好，但对于需要处理大量领域逻辑和功能的复杂应用程序，我强烈推荐使用Composition API。此外，Options API在与TypeScript结合时表现不佳，而TypeScript对于复杂应用来说几乎是必备的。

通过Composition API，您可以编写更清晰、模块化和可维护的代码，从而提升开发效率和代码质量。

原文链接: https://mokkapps.de/blog/why-i-love-vue-3-s-composition-api