VueJS 中 Composition API 的最新动态 - Daily.dev

现代前端框架（如 React、Angular 和 Vue）鼓励开发者重用组件，这是一种优秀的软件开发实践，可以显著提升开发效率和代码的可维护性。然而，随着应用逻辑的复杂性增加，组件代码可能会变得难以阅读和理解。为了解决这一问题，VueJS 引入了一个名为 Composition API 的新特性，并在 Vue 3 中进行了更新。

为什么选择 Composition API？

在 Vue 的早期版本中，开发者主要通过选项 API（Options API）来组织代码。选项 API 提供了六种类型的选项：组件、道具（props）、方法（methods）、数据（data）、生命周期钩子（lifecycle hooks）和计算属性（computed）。例如，在开发一个计算器组件时，响应式属性需要在 data() 中定义，而逻辑则需要写在 methods 中。最终，代码会被分散到多个选项中。

export default {
  data: function () {
    return {
      // 加法属性
      // 减法属性
      // 乘法属性
      // ...
    };
  },
  methods: {
    // 加法逻辑
    // 减法逻辑
    // 乘法逻辑
    // ...
  },
};

然而，当组件变得复杂时，这种代码组织方式可能会导致代码难以维护。此外，代码重用模式也存在一些缺点，例如命名空间冲突和配置复杂等问题。

为了解决这些挑战，Vue 引入了 Composition API。这是一种全新的方式，用于构建和编写 Vue 组件，能够更好地应对复杂性问题。值得一提的是，Composition API 的灵感部分来源于 React Hooks，但两者在实现方式上有所不同。一个关键区别在于，Vue 的 setup 函数在组件创建时只运行一次，而 React Hooks 则可能在渲染过程中多次运行。

使用 Composition API 组织逻辑代码

在 Composition API 中，开发者可以使用一个名为 setup() 的新方法。这个方法允许开发者摆脱选项 API 的限制，自由地组织组件逻辑。例如，可以将函数定义在组件外部，并在 setup 方法中调用它们。

export default {
  setup() {
    // 加法函数
    // 减法函数
    // 乘法函数
    // ...
  },
};

function add() {}
function subtract() {}
function multiply() {}

注意： 为了保持代码的清晰性和可维护性，建议将这些函数保存在更低级的文件结构中。

提升代码的可重用性

在上述示例中，我们创建了三个独立的函数。这些函数可以被保存在单独的文件中，并在需要时导入到其他组件中使用。由于这些函数是独立开发的，因此可以更灵活地在不同的组件中复用。

如何安装 Composition API？

对于 Vue 3 项目，Composition API 是默认支持的，无需额外安装。但如果你使用的是 Vue 2，则需要通过 NPM 安装：

# 使用 NPM 安装
npm install @vue/composition-api --save

安装完成后，可以在 main.js 文件中引入并启用：

import VueCompositionAPI from '@vue/composition-api';
Vue.use(VueCompositionAPI);

如果你已经熟悉 VueJS，那么理解 Composition API 会更加容易。

Composition API 与 Options API 的对比

为了更好地理解 Composition API，我们可以通过实现一个简单的 Vue 组件来比较它与 Options API 的差异。

使用 Options API

以下是一个使用 Options API 的示例：


  
    薪资
    薪资：{{ salary }}
    
    
  



export default {
  data() {
    return {
      salary: 0,
    };
  },
  methods: {
    reduceSalary() {
      this.salary -= 100;
    },
    increaseSalary() {
      this.salary += 100;
    },
  },
};

在这个示例中，逻辑被分散在 methods 和 data 中。当组件功能变得复杂时，代码的可读性和维护性会显著下降。

使用 Composition API

使用 Composition API，可以将逻辑组织成独立的函数，并在需要时跨组件复用。

步骤 1：将每个功能作为独立函数维护

以下是创建组合函数的三种方法：

创建多个新文件，每个文件包含一个组合函数。
创建一个新文件，将所有组合函数写入其中。
在组件中直接编写组合函数。

为了保持代码的清晰性和可读性，建议采用第一种方法。

// increaseSalary.js
import { ref } from 'vue';

export default function useIncreaseSalary(amount) {
  const salary = ref(0);
  salary.value += amount;
  return salary;
}

// deductSalary.js
import { ref } from 'vue';

export default function useDeductSalary(amount) {
  const salary = ref(0);
  salary.value -= amount;
  return salary;
}

步骤 2：在组件中导入并使用这些方法


  
    薪资
    {{ salary.value }}
    
    
  



import { ref } from '@vue/composition-api';
import useDeductSalary from './components/deductSalary';
import useIncreaseSalary from './components/increaseSalary';

export default {
  setup() {
    const salary = ref(0);
    const deductSalary = useDeductSalary(/* 配置 */);
    const increaseSalary = useIncreaseSalary(/* 配置 */);

    return {
      salary,
      deductSalary,
      increaseSalary,
    };
  },
};

注意： 返回的对象需要包含 value 属性，以确保其响应性。

结论

与 Vue 2 相比，Composition API 为开发者提供了更高效、更灵活的代码组织方式。然而，Options API 并未被废弃，开发者仍然可以根据自己的习惯选择使用。但作为一名 Vue 开发者，推荐尝试使用 Composition API，因为它能够显著提升代码的结构化和重用性。

原文链接: https://daily.dev/blog/whats-new-with-the-composition-api-in-vuejs