探索Vue中组合式API和选项式API的用法与比较

 更新时间:2023年12月25日 11:57:50   作者:旺仔小猪  
Vue3为我们开发提供了两种组件逻辑实现方式:选项式API和组合式API,本文将尝试为大家分析什么是选项式API和组合式API,以及两种API的优缺点,希望对大家有所帮助

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

前言

Vue3为我们开发提供了两种组件逻辑实现方式:选项式API和组合式API,为我们开发者提供了更多的选择和灵活性

本文将尝试为大家分析什么是选项式API和组合式API,以及两种API的优缺点

一、选项式API

1.1 选项式API

选项式 API (Options API),使用选项式 API,我们可以用包含多个选项的对象来描述组件的逻辑,例如 datamethods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上,它会指向当前的组件实例。

选项式API是一种基于选项对象的组件编写方式,通过在组件选项中定义data、computed、methods等属性来组织组件的逻辑。

通过选项式API,我们可以很方便地定义组件的数据和方法,并在模板中进行使用。

1.2 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3!',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>
<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>
 
<script>

1.3 优缺点

1.3.1 优点

  • 简单易学:选项式API是VueJS早期版本的传统编写方式,对于已经熟悉Vue2的开发者涞水,迁移到Vue3的选项是API较为容易,无需学习新的概念和语法
  • IDE支持良好:由于选项API使用了对象字面量的形式来定义组件选项,IDE工具对于代码语法高亮、代码提示和静态分析支持较好,开发体验较为友好
  • 文档和资源丰富:选项是API是VueJS较早版本的主流编写方式,因此相关的文档、教程和社区资源丰富,开发者可以轻松找到所需的帮助和解决方案
  • 直观易懂:选项式API将组件的不同选项(如data、methods、computed等)集中在一个对象中,使得组件的结构和功能一目了然,易于理解和维护
  • 对于小型项目和快速原型开发更友好:选项式API适用于简单和小型的项目,以及对于快速原型开发,可以快速构建出组件并实现基本功能

1.3.2 缺点

  • 灵活性差:选项式API在组织和复用逻辑方面相对于较为受限,随着项目规模和复杂度的增加,可能会导致组件代码冗长和难以维护
  • 逻辑复用困难:在选项式API中,将逻辑复用的粒度较大,很难在不同组件之间共享和复用小型的逻辑块,可能导致代码冗余
  • 难以进行单元测试:由于选项式API将逻辑分散在不同的选项中,单独测试某个逻辑块变得困难,需要依赖整个组件实例的上下文
  • 代码组织较为分散:在选项式API中,相关的逻辑和数据分散在不同的选项中,可能导致代码的组织和阅读不够紧促和直观

二、组合式API

2.1 组合式API是什么

组合式API是Vue3提供的一种基于函数的组件编写方式,通过使用一组函数来组织和复用组件的逻辑。它提供了一种更灵活、更可组合的方式来编写组件。

以下内容来自于官方:

组合式API(Composition API)是一系列 API 的集合,使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语,涵盖了以下方面的API:

  • 响应式API:例如 ref()reactive(),使我们可以直接创建响应式状态、计算属性和侦听器。
  • 生命周期钩子:例如 onMounted()onUnmounted(),使得我们可以在组件各个生命周期阶段添加逻辑
  • 依赖注入:例如 provide() 和 inject(),使我们可以在使用响应式 API 时,利用 Vue 的依赖注入系统。

另外,我们可以了解的一点是,组合式API不仅是 Vue3 的内置功能,在Vue2.7中就已经是内置了

通过组合式API,我们可以将相关的逻辑组织为函数,使得代码更加模块化、可复用和可测试。我们可以在setup函数中使用任何JavaScript语法。包括条件语句、循环等,来处理组件的逻辑。这种编写方式使得我们能够更好地组织和管理组件的功能,提高代码的可维护性和可读性

2.2 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { ref } from 'vue';
 
export default {
  setup() {
    const message = ref('Hello, Vue3!');
    const count = ref(0);
 
    function increment() {
      count.value++;
    }
 
    return {
      message,
      count,
      increment
    };
  }
};

2.3 优缺点

2.3.1 优点

  • 代码组织和复用:组合式API允许将相关逻辑封装为函数,使得代码更加模块化和可复用,这样可以提高代码的组织性和可维护性
  • 更灵活的逻辑复用:通过将逻辑抽象为函数,我们可以更方便地在不同组件之间进行逻辑复用,减少代码的冗余
  • 更清晰的逻辑关系:组合式API使得组件的逻辑更加明确,每个函数都代表了特定的功能,使得代码更异步、更理解
  • 更好的类型推导:组合式API兼顾了对TypeScript的支持,可以提供更好的类型推导和代码静态分析。这有助于在开发过程中捕获潜在的错误并增强代码的健壮性
  • 更好的逻辑封装:组合式API使得逻辑可以更小的粒度进行封装,使得代码更加模块化和可维护。每个函数代表一个特定的功能,可以更容易的理解和修改逻辑
  • 更好的响应式控制:组合式API提供了 ref 和 reactive 等响应式函数,可以更精细地控制数据的响应性。可以选择使用 ref 进行单一值的响应式,或者使用 reactive 进行对象的响应式

2.3.2 缺点

  • 抽象程度:组合式API的灵活性也可能导致代码的抽象程度增加,有时可能会增加理解和维护的难度。在设计复杂的逻辑时,需要谨慎选择抽象的层次
  • 可能导致函数爆炸:当逻辑复用的粒度过小或者过于具体时,可能会导致大量的小型函数,从而增加代码的复杂性和理解难度
  • 学习成本:由于组合式API引入了一些新的概念和函数式编程的思维方式,学习成本可能会比较高。开发者需要熟悉Vue3的响应式系统、函数式编程的概念以及如何组织和组合函数
  • 项目一致性:在团队开发中,如果不统一约定使用组合式API的风格,可能会导致代码风格和组织方式的不一致,增加沟通和维护的成本。

课堂问答

 Vue3为什么要使用组合式API

组合式API(Composition API)是什么?

组合式API(Composition API),是一系列 API 的集合,简单来说就是将同一逻辑关注点的代码配置在一起

主要目的是:

为了增强代码的可读性和可维护性;

允许相同逻辑代码在不同组件中进行完整复用

为什么要使用组合式API?

  • 更好的逻辑复用:选项式API中我们主要的逻辑复用机制是 mixins ,但是 mixins 又有这三大主要短板:1)不清晰的数据来源。2)命名空间冲突。3)隐式的跨 mixins 交流
  • 更灵活的代码组织:大部分代码都自然地被放进了对应的选项里
  • 更好的类型推导:可以享受到完整的类型推导,不需要书写太多类型标注
  • 更小的生产包体积:由于 <script setup> 形式书写的组件模板被编译为了一个内联函数,和 <script setup> 中的代码位于同一作用域。

到此这篇关于探索Vue中组合式API和选项式API的用法与比较的文章就介绍到这了,更多相关Vue组合式API和选项式API内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://juejin.cn/post/7315846825345073178

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • vue3使用ref的性能警告问题

    vue3使用ref的性能警告问题

    这篇文章主要介绍了vue3使用ref的性能警告问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue双向数据绑定(MVVM)的原理

    Vue双向数据绑定(MVVM)的原理

    这篇文章主要介绍了Vue双向数据绑定的原理,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
    2020-10-10
  • 简单聊聊Vue中的计算属性和属性侦听

    简单聊聊Vue中的计算属性和属性侦听

    计算属性用于处理复杂的业务逻辑,vue提供了检测数据变化的一个属性watch可以通过newVal获取变化之后的值,这篇文章主要给大家介绍了关于Vue中计算属性和属性侦听的相关资料,需要的朋友可以参考下
    2021-10-10
  • 关于vue3.0使用axios报错问题

    关于vue3.0使用axios报错问题

    这篇文章主要介绍了vue3.0使用axios报错问题记录,vue-cli3.0安装插件的时候要注意区分vue-cli2.0的命令,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • 详谈Object.defineProperty 及实现数据双向绑定

    详谈Object.defineProperty 及实现数据双向绑定

    这篇文章主要介绍了详谈Object.defineProperty 及实现数据双向绑定,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue elementui 实现图片上传后拖拽排序功能示例代码

    vue elementui 实现图片上传后拖拽排序功能示例代码

    这篇文章主要介绍了vue elementui 实现图片上传后拖拽排序功能,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01
  • Vue-scoped(局部)样式使用方法及实例代码

    Vue-scoped(局部)样式使用方法及实例代码

    这篇文章主要介绍了Vue-scoped(局部)样式使用方法及实例代码,文中示例代码介绍了的非常详细感兴趣的同学可以参考阅读一下
    2023-05-05
  • 使用this.$nextTick()获取不到数据更新后的this.$refs.xxx.及场景分析

    使用this.$nextTick()获取不到数据更新后的this.$refs.xxx.及场景分析

    今天遇到了这样一个场景,在数据更新之后,使用this.$nextTick(()=>{console.log(this.$refs.xxx)}) 获取不到改dom,但是用setTimeout能够获取到,在此记录一下,感兴趣的朋友跟随小编一起看看吧
    2023-02-02
  • Vue实现订单支付倒计时功能

    Vue实现订单支付倒计时功能

    这篇文章主要给大家介绍了Vue实现订单支付倒计时功能,倒计时这要运用在创建订单后15分钟内进行支付,否则订单取消,本文结合示例代码给大家详细讲解,需要的朋友可以参考下
    2023-08-08
  • Vue常用指令V-model用法

    Vue常用指令V-model用法

    本篇文章主要介绍了Vue常用指令_V-model用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03

最新评论