Vue3 新特性详解：Composition API 的优势与应用

JJCTO袁龙

于 2024-09-02 08:16:29 发布

阅读量1.5k

点赞数 25

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/yuanlong12178/article/details/141800814

版权

Vue 专栏收录该内容

459 篇文章 5 订阅

订阅专栏

Vue3 新特性详解：Composition API 的优势与应用

Vue.js 自从诞生以来，就以其简洁和灵活的特性受到开发者们的青睐。而在 Vue3 中，新引入的 Composition API 无疑是一个重大的改变，它为开发者提供了更强大、更灵活的组件逻辑组织能力。在这篇博客中，我们将深入探讨 Composition API 的优势，并结合示例代码展示其应用。

什么是 Composition API？

Composition API 是 Vue3 新增的一组 API，用于组织和复用组件逻辑。与传统的选项式 API 不同，Composition API 提供了一种更为灵活的结构，使得我们可以更清晰地组织代码，尤其在应对复杂的组件时。

1. 优势

1.1 逻辑复用

在选项式 API 中，逻辑复用依赖于 mixins 和高阶组件，但这往往导致了命名冲突和难以追踪的问题。Composition API 通过将逻辑封装在可复用的函数中，极大地提高了逻辑复用的便利性。

1.2 更好的组织能力

通过将组件的逻辑按功能进行归类，而不是按响应式属性进行分类，Composition API 使组件更清晰。不同的功能可以在同一个 setup 函数中被组织在一起，而不必分散在 data、methods 和 computed 中。

1.3 更好的 TypeScript 支持

Composition API 提供了更清晰的类型推导，尤其是在使用 TypeScript 时，开发者可以更方便地获得类型提示和检查，提升开发效率。

demo：使用 Composition API

下面我们通过一个简单的示例来理解 Composition API 的基本用法。

示例：计数器应用

<template>
  <div>
    <h1>计数器：{{ count }}</h1>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 使用 ref 创建响应式变量
    const count = ref(0);

    // 增加计数
    const increment = () => {
      count.value++;
    };

    // 减少计数
    const decrement = () => {
      if (count.value > 0) {
        count.value--;
      }
    };

    // 重置计数
    const reset = () => {
      count.value = 0;
    };

    // 返回响应式数据和方法
    return {
      count,
      increment,
      decrement,
      reset,
    };
  },
};
</script>

<style scoped>
h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}
button {
  margin-right: 10px;
}
</style>

代码解析

ref 的使用：在 setup 函数中，我们通过 ref 创建了一个响应式变量 count。ref 返回一个对象，包含一个 value 属性，用于访问和修改原始值。
定义方法：我们定义了三个简单的方法：increment、decrement 和 reset，分别用于增加、减少和重置计数器。同样，需要通过 value 属性来修改响应式数据。
返回值：在 setup 函数中返回响应式数据和方法，使得这些在模板中可以直接访问。

2. 组合逻辑

Composition API 的另一个强大之处在于，我们可以将逻辑分解到多个可复用的函数中，这使得代码更具可维护性。

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

export function useCounter() {
  const count = ref(0);

  const increment = () => {
    count.value++;
  };

  const decrement = () => {
    if (count.value > 0) {
      count.value--;
    }
  };

  const reset = () => {
    count.value = 0;
  };

  return {
    count,
    increment,
    decrement,
    reset,
  };
}

随后在主组件中使用：

<template>
  <div>
    <h1>计数器：{{ count }}</h1>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script>
import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment, decrement, reset } = useCounter();

    return {
      count,
      increment,
      decrement,
      reset,
    };
  },
};
</script>