Vue 3 Composition API，你真的需要它吗？- This Dot Labs

本文写于18个月前，可能包含过时的信息。部分内容可能仍然相关，但建议参考官方文档或最新资源以获取最新信息。

Vue 3 的新特性概览

Vue 团队宣布 Vue 框架的第 3 版将于 2020 年第一季度发布。新版本带来了许多改进，尤其是在框架核心层面，同时保留了我们熟悉的 Vue 应用程序构建语法。新框架的代码库进行了重写，性能得到显著提升。

以下是 Vue 3 中的一些主要变化：

• 虚拟 DOM 重写以提升性能，并改进对 TypeScript 的支持。
• 暴露反应性 API。
• 支持时间切片。
• 静态树提升。
• 优化插槽生成。
• 单一函数调用优化。

本文将重点介绍 Vue 3 的 Composition API，这是一项完全可选但功能强大的新特性。

Vue 组件的构建方式

Vue 3 引入了新的 Composition API，用于构建组件。相比之下，Vue 2 使用的是传统的组件选项 API。

传统的组件选项 API

在 Vue 2 中，组件通过多个选项（如 data、methods、computed 等）来定义功能。例如，一个支持产品列表展示和 CRUD 操作的组件可能如下定义：

• data 选项：用于定义产品列表数组以及单个产品对象。
• methods 选项：用于定义组件中需要的自定义方法。
• 其他选项：如 computed、watch 等。

这种方式适用于小型或中型应用，但当应用规模扩大到数千个组件时，问题就会显现。组件变得复杂且难以维护，代码重用和共享也受到限制。

组件选项 API 的问题

随着功能的增加，组件的实现会分散在多个选项中（如 props、data、methods 等），导致代码难以追踪和维护。此外，选项 API 对代码重用的支持有限，开发者不得不在多个组件中重复实现相同的功能。

使用 Mixins 改善代码复用

为了解决代码复用问题，Vue 2 提供了 Mixins。Mixins 允许将通用代码提取到单独的文件中，然后在需要的组件中引入。

尽管 Mixins 提高了代码复用性，但也带来了以下问题：

• 命名冲突：当组件和 Mixins 中的选项名称冲突时，组件选项优先。
• 复杂性增加：Mixins 继承了选项 API 的复杂性。
• 工具支持不足：Mixins 的运行时合并机制使得开发工具难以提供智能提示。

使用 Composition API

Vue 3 的 Composition API 提供了一种全新的组件构建方式。以下是它的主要特点：

• setup() 函数：这是 Composition API 的核心。它在组件创建之前运行，用于定义组件的状态和方法。
• 组合函数：可以将功能封装到独立的函数中，并在多个组件中复用。

示例：使用 Composition API 重构组件

以下是一个使用 Composition API 构建的组件示例：

import { ref } from '@vue/composition-api';

export function useProducts() {
  const products = ref([]);  const createProduct = (product) => {
    products.value.push(product);
  };  const updateProduct = (index, updatedProduct) => {
    products.value[index] = updatedProduct;
  };  const deleteProduct = (index) => {
    products.value.splice(index, 1);
  };  return {
    products,
    createProduct,
    updateProduct,
    deleteProduct,
  };
}

在组件中使用该组合函数：

import { useProducts } from './useProducts';

export default {
  setup() {
    const { products, createProduct, updateProduct, deleteProduct } = useProducts();    return {
      products,
      createProduct,
      updateProduct,
      deleteProduct,
    };
  },
};

Composition API 的优势

• 功能集中：功能实现可以集中在一个组合函数中，而不需要分散在多个选项中。
• 熟悉的语法：对于 JavaScript 开发者来说，组合函数只是普通的 JavaScript 函数。
• 增强的工具体验：开发工具可以更好地支持智能提示和类型检查。
• 更好的代码复用：每个功能都可以封装为独立的组合函数，便于在不同组件中复用。

实践：构建一个文件下载应用

为了更好地理解 Composition API 的实际应用，我们将开发一个包含两个视图的简单应用：

1. 下载图片视图：允许用户查看和下载图片文件。
2. 下载 PDF 视图：允许用户查看和下载 PDF 文件。

使用传统选项 API

在传统选项 API 中，两个视图的实现代码会有大量重复，缺乏代码复用。

引入 Mixins

通过将通用逻辑提取到 Mixins 中，可以减少重复代码，但仍然存在命名冲突和工具支持不足的问题。

使用 Composition API

通过 Composition API，我们可以将文件下载功能封装为一个组合函数：

import { ref, computed } from '@vue/composition-api';

export function useDownloadFile() {
  const isDownloading = ref(false);
  const progress = ref(0);  const downloadFile = async (fileName, fileType) => {
    isDownloading.value = true;
    // 模拟文件下载逻辑
    setTimeout(() => {
      isDownloading.value = false;
      progress.value = 100;
    }, 2000);
  };  return {
    isDownloading: computed(() => isDownloading.value),
    progress: computed(() => progress.value),
    downloadFile,
  };
}

在组件中使用该组合函数：

import { useDownloadFile } from './useDownloadFile';

export default {
  setup() {
    const { isDownloading, progress, downloadFile } = useDownloadFile();    return {
      isDownloading,
      progress,
      downloadFile,
    };
  },
};

总结

Vue 3 的 Composition API 是可选的，但它为开发者提供了更灵活、更强大的工具来构建组件。通过集中功能实现、增强工具支持和提高代码复用性，Composition API 特别适合大型应用程序。

如果您正在开发一个包含大量组件的复杂应用，或者对传统选项 API 的分散实现感到困扰，那么是时候尝试使用 Composition API 了！

快乐编码！

原文链接: https://www.thisdot.co/blog/vue-3-composition-api-do-you-really-need-it