「Vue3面试系列」Vue3 所采用的 Composition Api 与 Vue2 使用的 Options Api 有什么不同?

在这里插入图片描述

文章目录

    • 开始之前
    • 正文
      • 一、Options Api
      • 二、Composition Api
      • 三、对比
        • 逻辑组织
          • Options API
          • Compostion API
        • 逻辑复用
      • 小结

开始之前

Composition API 可以说是Vue3的最大特点,那么为什么要推出Composition Api,解决了什么问题?

通常使用Vue2开发的项目,普遍会存在以下问题:

  • 代码的可读性随着组件变大而变差
  • 每一种代码复用的方式,都存在缺点
  • TypeScript支持有限

以上通过使用Composition Api都能迎刃而解

正文

一、Options Api

Options API,即大家常说的选项API,即以vue为后缀的文件,通过定义methodscomputedwatchdata等属性与方法,共同处理页面逻辑

如下图:

在这里插入图片描述

可以看到Options代码编写方式,如果是组件状态,则写在data属性上,如果是方法,则写在methods属性上…

用组件的选项 (datacomputedmethodswatch) 组织逻辑在大多数情况下都有效

然而,当组件变得复杂,导致对应属性的列表也会增长,这可能会导致组件难以阅读和理解

二、Composition Api

在 Vue3 Composition API 中,组件根据逻辑功能来组织的,一个功能所定义的所有 API 会放在一起(更加的高内聚,低耦合)

即使项目很大,功能很多,我们都能快速的定位到这个功能所用到的所有 API

在这里插入图片描述

三、对比

下面对Composition ApiOptions Api进行两大方面的比较

  • 逻辑组织
  • 逻辑复用
逻辑组织
Options API

假设一个组件是一个大型组件,其内部有很多处理逻辑关注点(对应下图不用颜色)

在这里插入图片描述

可以看到,这种碎片化使得理解和维护复杂组件变得困难

选项的分离掩盖了潜在的逻辑问题。此外,在处理单个逻辑关注点时,我们必须不断地“跳转”相关代码的选项块

Compostion API

Compositon API正是解决上述问题,将某个逻辑关注点相关的代码全都放在一个函数里,这样当需要修改一个功能时,就不再需要在文件中跳来跳去

下面举个简单例子,将处理count属性相关的代码放在同一个函数了

function useCount() {let count = ref(10);let double = computed(() => {return count.value * 2;});const handleConut = () => {count.value = count.value * 2;};console.log(count);return {count,double,handleConut,};
}

组件上中使用count

export default defineComponent({setup() {const { count, double, handleConut } = useCount();return {count,double,handleConut}},
});

再来一张图进行对比,可以很直观地感受到 Composition API在逻辑组织方面的优势,以后修改一个属性功能的时候,只需要跳到控制该属性的方法中即可

在这里插入图片描述

逻辑复用

Vue2中,我们是用过mixin去复用相同的逻辑

下面举个例子,我们会另起一个mixin.js文件

export const MoveMixin = {data() {return {x: 0,y: 0,};},methods: {handleKeyup(e) {console.log(e.code);// 上下左右 x yswitch (e.code) {case "ArrowUp":this.y--;break;case "ArrowDown":this.y++;break;case "ArrowLeft":this.x--;break;case "ArrowRight":this.x++;break;}},},mounted() {window.addEventListener("keyup", this.handleKeyup);},unmounted() {window.removeEventListener("keyup", this.handleKeyup);},
};

然后在组件中使用

<template><div>Mouse position: x {{ x }} / y {{ y }}</div>
</template>
<script>
import mousePositionMixin from './mouse'
export default {mixins: [mousePositionMixin]
}
</script>

使用单个mixin似乎问题不大,但是当我们一个组件混入大量不同的 mixins 的时候

mixins: [mousePositionMixin, fooMixin, barMixin, otherMixin]

会存在两个非常明显的问题:

  • 命名冲突
  • 数据来源不清晰

现在通过Compositon API这种方式改写上面的代码

import { onMounted, onUnmounted, reactive } from "vue";
export function useMove() {const position = reactive({x: 0,y: 0,});const handleKeyup = (e) => {console.log(e.code);// 上下左右 x yswitch (e.code) {case "ArrowUp":// y.value--;position.y--;break;case "ArrowDown":// y.value++;position.y++;break;case "ArrowLeft":// x.value--;position.x--;break;case "ArrowRight":// x.value++;position.x++;break;}};onMounted(() => {window.addEventListener("keyup", handleKeyup);});onUnmounted(() => {window.removeEventListener("keyup", handleKeyup);});return { position };
}

在组件中使用

<template><div>Mouse position: x {{ x }} / y {{ y }}</div>
</template><script>
import { useMove } from "./useMove";
import { toRefs } from "vue";
export default {setup() {const { position } = useMove();const { x, y } = toRefs(position);return {x,y,};},
};
</script>

可以看到,整个数据来源清晰了,即使去编写更多的 hook 函数,也不会出现命名冲突的问题

小结

  • 在逻辑组织和逻辑复用方面,Composition API是优于Options API
  • 因为Composition API几乎是函数,会有更好的类型推断。
  • Composition APItree-shaking 友好,代码也更容易压缩
  • Composition API中见不到this的使用,减少了this指向不明的情况
  • 如果是小型组件,可以继续使用Options API,也是十分友好的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/599489.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网工内推 | 保险业网工,有绩效奖金,CISP认证优先,最高16K

01 华贵人寿保险股份有限公司 招聘岗位&#xff1a;系统管理岗&#xff08;主机管理方向&#xff09; 职责描述&#xff1a; 1.负责数据中心私有云平台的规划建设以及后期的运行维护&#xff1b; 2.负责公司操作系统的规划、部署与日常维护&#xff1b; 3.负责操作系统运维相关…

rime中州韵小狼毫 help lua Translator 帮助消息翻译器

lua 是 Rime中州韵/小狼毫输入法强大的武器&#xff0c;掌握如何在Rime中州韵/小狼毫中使用lua&#xff0c;你将体验到什么叫 随心所欲。 先看效果 在 rime中州韵 输入效果一览 中的 &#x1f447; help效果 一节中&#xff0c; 我们看到了在Rime中州韵/小狼毫输入法中输入 h…

算法第十一天-组合总和Ⅳ

组合总和Ⅳ 题目要求 解题思路 来自[负雪明烛] 题目有个明显的提示&#xff1a;求组合的个数&#xff0c;而不是每个组合。如果是要求出每个组合&#xff0c;那么必须使用回溯法&#xff0c;保存所有路径。但是如果是组合个数&#xff0c;一般都应该想到[动态规划]的解法。 直…

记录 搭载小车 运行激光slam lio-sam fast-lio2

用了将近一个月搭载了一台履带车 其中 主控&#xff1a;NUC i7-8559U 激光雷达为&#xff1a;velodyne16线和hesai64线 IMU为&#xff1a;轮趣N100 mini 对imu使用上位机进行调平矫正 设置输出400HZ 对外参标定 首先使用velodyne16线 安装驱动直接运行&#xff0c;没遇到啥…

人工智能_机器学习092_使用三维瑞士卷数据_利用分层聚类算法进行瑞士卷数据三维聚类---人工智能工作笔记0132

然后我们使用分层聚类算法来对我们导入的瑞士卷数据进行聚类 agg =AgglomerativeClustering(n_clusters = 6,linkage = ward) 可以看到这里我们使用的,聚类距离计算用的是,ward这种,最小化簇内方差的形式,l进行聚类对吧 可以看到这个linkage参数有好几个选择对吧,是之前我们讲过…

面试 Vue 框架八股文十问十答第二期

面试 Vue 框架八股文十问十答第二期 作者&#xff1a;程序员小白条&#xff0c;个人博客 相信看了本文后&#xff0c;对你的面试是有一定帮助的&#xff01;关注专栏后就能收到持续更新&#xff01; ⭐点赞⭐收藏⭐不迷路&#xff01;⭐ 1&#xff09;常见的事件修饰符及其作…

leetcode06-单调数组的判断

题目链接&#xff1a; https://leetcode.cn/problems/monotonic-array/description/?envTypestudy-plan-v2&envIdprogramming-skills 思路&#xff1a; 判断是否为单调数组只有两种情况&#xff1a; 1.单调递增时 遍历整个数组 若发现有递减的两项 则不为单调数组…

JavaScript中重排与重绘的区别及触发条件

重排&#xff08;reflow&#xff09;指的是浏览器计算元素的大小和位置&#xff0c;确定页面中每个元素的几何信息的过程。重排是一项昂贵的操作&#xff0c;会消耗大量的计算资源。 重绘&#xff08;repaint&#xff09;指的是在页面中的元素样式发生改变&#xff0c;但不会影…

网络通信理论-入门1

网口框架 100M 2. 物理层解读 2.1 同步的方法&#xff1a;编码 为了让接收方在没有外部时钟参考的情况也能确定每一位的起始、结束和中间位置&#xff0c;在传输信号时不直接采用二进制编码。在 10BASE-T 的传输方式中采用曼彻斯特编码&#xff0c;在 100BASE-T 中则采用 4B/…

一切皆文件有必要单独提出来说

引述 Unix/Linux操作系统血脉&#xff0c;一切皆文件的设计哲学被一直继承了下来。 以前多次很有疑问&#xff0c;为什么操作系统设计上会锚点到文件上呢&#xff1f; 图灵机 如果去刨根问底一切皆文件的设计哲学&#xff0c;就不得不提到图灵机理论。 在图灵机模型中&…

Java JDBC整合(概述,搭建,PreparedStatement和Statement,结果集处理)

一、JDBC的概述&#xff1a; JDBC&#xff1a;是一种执行sql语句的Java APL&#xff0c;可以为多种关系类型数据库提供统一访问&#xff0c;它由一组用Java语言编写的类和接口组成。有了JDBC&#xff0c;Java人员只需要编写一次程序就可以访问不同的数据库。 JDBC APL&#xf…

Xpath定位方法

Xpath定位方法 1.根据路径定位 #绝对路径&#xff1a;以/开头从html开始一级一级往下写 driver.find_element_by_xpath(路径) #选中元素->右击->copy full xpath #相对路径&#xff1a;以//开头 路径[第几个符合条件的元素]2.利用元素属性定位 //标签名[属性名属性值…

LCR 076. 数组中的第 K 个最大元素

LCR 076. 数组中的第 K 个最大元素 题目链接&#xff1a;LCR 076. 数组中的第 K 个最大元素 下面这个题与这个题一样&#xff1a; 题目链接&#xff1a;215. 数组中的第K个最大元素 这个代码只能通过第一个题&#xff0c;如下&#xff1a; class Solution { public:int fin…

Python+PyCharm的安装配置及教程(实用)

python and PyCharm 安装教程可参考&#xff1a;https://blog.csdn.net/wangyuxiang946/article/details/130634049 Pyhon 下载地址&#xff1a;https://www.python.org/downloads/ PyCharm 下载地址&#xff1a;https://www.jetbrains.com/pycharm/download/?sectionwindo…

AP9196 DC-DC升压恒流电源管理芯 3-40V 200W升降压线路图

产品说明 AP9196 是一系列电路简洁的宽调光比升压调光恒流驱动器&#xff0c;适用于 3-40V 输入电压范围的 LED照明领域。AP9196 采用我司专利算法&#xff0c;可以实现高精度的恒流效果&#xff0c;输出电流恒流精度≤3&#xff05;&#xff0c;电压工作范围为5-40V&#xff0…

步进电机调速原理

/*----------------------------------------------- 内容&#xff1a;本程序用于测试4相步进电机常规驱动 2个按键 调节速度 使用1-2相励磁 数码管显示 1-5速度等级&#xff0c;数字越大&#xff0c;速度越小 --------------------------------------------…

运维工程师的困境和解困之道

运维工程师是指负责维护和管理企业IT基础设施的专业人员。他们需要确保从应用程序到服务器、网络等所有层面的运行顺畅&#xff0c;以支持企业的日常业务运营。运维工程师的工作涉及到诸多领域&#xff0c;包括系统管理、网络管理、存储管理、安全管理和自动化等。 业务部门对I…

在Fiber中处理请求和响应

掌握GoLang Fiber中请求和响应管理的艺术&#xff0c;以实现高效的Web开发 在Web开发领域&#xff0c;有效地处理请求和响应是构建既用户友好又高效的Web应用的基石。该过程涉及管理传入的HTTP请求、解析数据和参数、构建适当的响应、处理不同的响应类型以及优雅地处理错误。对…

微机原理14练习题答案

一、单项选择题(本大题共15小题,每小题3分,共45分。在每小题给出的四个备选项中,选出一个正确的答案。) 1,下面寻址方式的操作数不在存储器中的是(C) A. 堆栈寻址 B. 寄存器间址 C.寄存器寻址 D. 直接寻址 2,条件转移指令JNE的条件是(C) A. CF=0 B. CF=1 C. ZF=0 D. ZF=1 3…

湖仓架构的演进

1.数据仓库架构的历史演进 起初&#xff0c;业界数据处理首选方式是数仓架构。通常数据处理的流程是把一些业务数据库&#xff0c;通过ETL的方式加载到Data Warehouse中&#xff0c;再在前端接入一些报表或者BI的工具去展示。 数据仓库概念是 Inmon 于 1990 年提出并给出了完…