Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同?

面试官:Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options 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 Api Options 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 API tree-shaking 友好,代码也更容易压缩
  • Composition API中见不到this的使用,减少了this指向不明的情况
  • 如果是小型组件,可以继续使用Options API,也是十分友好的

推荐:https://whyta.cn/post/fc7a48357356/

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

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

相关文章

交流插座电器漏电断路器的低功耗控制芯片D4140,内置桥式整流器漏电灵敏度可调,采用SOP8和DIP8 的封装形式

D4140 是一种用于交流插座电器漏电断路器的低功耗控制器。这些设备可以检测到接地的危险电流路径&#xff0c;例如设备掉进水中。在发生有害或致命的电击之前&#xff0c;断路器会断开线路。内置有整流桥&#xff0c;齐纳管稳压器&#xff0c;运算放大器&#xff0c;电流基准&a…

论文阅读——Loss odyssey in medical image segmentation

Loss odyssey in medical image segmentation github&#xff1a;https://github.com/JunMa11/SegLossOdyssey 这篇文章回顾了医学图像分割中的20种不同的损失函数&#xff0c;旨在回答&#xff1a;对于医学图像分割任务&#xff0c;我们应该选择哪种损失函数&#xff1f; 首…

世岩清上:博物馆展览的叙事性设计

博物馆展览的叙事性设计是一种艺术与科学的结合&#xff0c;它通过将展品、灯光、布局和文本等元素进行精心策划和设计&#xff0c;以讲述一个引人入胜的故事&#xff0c;让参观者能够更深入地了解展览的主题和内容。 一、叙事性设计的关键要素 主题与目标 叙事性设计的第一步…

倾斜摄影三维模型的根节点合并的优势分析

倾斜摄影三维模型的根节点合并的优势分析 根节点合并是倾斜摄影三维模型处理中的一项重要技术&#xff0c;它具有许多优势&#xff0c;可以显著提升模型数据的处理效率和渲染性能。在本文中&#xff0c;我们将对倾斜摄影三维模型的根节点合并的优势进行详细分析。 1、数据大小…

1038. 从二叉搜索树到更大和树 --力扣 --JAVA

题目 给定一个二叉搜索树 root (BST)&#xff0c;请将它的每个节点的值替换成树中大于或者等于该节点值的所有节点值之和。 提醒一下&#xff0c; 二叉搜索树 满足下列约束条件&#xff1a; 节点的左子树仅包含键 小于 节点键的节点。节点的右子树仅包含键 大于 节点键的节点。…

计算机毕业设计|基于SpringBoot+SSM+MyBatis框架的迷你仿天猫商城购物系统设计与实现

计算机毕业设计|基于SpringBootMyBatis框架的仿天猫商城购物系统设计与实现 迷你仿天猫商城是一个基于SpringBootSSMMyBatis框架的综合性B2C电商平台&#xff0c;需求设计主要参考天猫商城的购物流程&#xff1a;用户从注册开始&#xff0c;到完成登录&#xff0c;浏览商品&am…

家用小型洗衣机哪款性价比高?内衣洗衣机品牌推荐

近日&#xff0c;国内著名的电子商务平台公布了“内衣洗衣机产业趋势”的研究报告。该报告指出&#xff0c;由于消费者对生活质量的要求越来越高&#xff0c;内衣洗衣机的行业也有了长足的发展&#xff0c;特别是在今年以来&#xff0c;内衣洗衣机的销售额同比上涨了830%&#…

汽车音响静音检测电路芯片D3703F,6V~16V SOP8封装

D3703F 是一块汽车音响静 音检测电路。用于音 响系统检测在放音或快进/退时进行静音检测&#xff0c;电压范围: 6V~16V&#xff0c;信号检测和静音时间可通过外围电阻 、电容来改变。D3703F采用SOP8的封装形式封装 主要特点: 快进/退时也可进行静音 检测 信号检测…

BearPi Std 板从入门到放弃 - 引气入体篇(3)(上两篇前言)

GPIO调用函数 stm32l4xx_hal_gpio.h /* IO operation functions *****************************************************/ GPIO_PinState HAL_GPIO_ReadPin(GPIO_TypeDef* GPIOx, uint16_t GPIO_Pin); // 读取GPIO状态 void HAL_GPIO_WritePin(GPIO_TypeDe…

小黄鸟(HTTPCanary)安装及Android高版本CA证书配置

小黄鸟&#xff08;HTTPCanary&#xff09;安装及Android高版本CA证书配置 HTTPCanary及CA证书安装 1.HTTPCanary下载2.导出CA证书3.安装CA证书 1.HTTPCanary下载 从下面链接下载安装HTTPCanary 链接: https://xiao6ming6.lanzouq.com/iQcB902w15pg 密码:4wby 2.导出CA证书 1.…

关于this和构造器的理解

1.类中的this关键字表示当前对象的引用。它可以被用于解决变量名冲突问题&#xff0c;或者在一个方法中调用类的另一个方法。如果在方法中没有明确指定要使用哪个变量&#xff0c;那么编译器就会默认使用this关键字来表示当前对象。 下面是一个输出this关键字的示例代码&#…

【MODBUS】Modbus 主从模式的部署方式

Modbus通信协议通常以主从&#xff08;Master-Slave&#xff09;模式进行部署&#xff0c;其中一个设备充当主站&#xff08;Master&#xff09;&#xff0c;而其他设备充当从站&#xff08;Slave&#xff09;。主站负责发起请求&#xff0c;而从站则负责响应这些请求。下面是一…

初学者如何入门Generative AI:看两篇综述,玩几个应用感受一下先!超多高清大图,沉浸式体验

文章大纲 综述与简介从神经网络到Transformer不同种类的深度神经网络transformer 原理与解析BERTGPTTransformer 结构演化与应用历史transformer 在视觉上的应用AIGC 应用快速生成领域初级知识 PPT多人协作数字白板 + 图像生成本地部署大模型进行网站综述生成效果巨好的数字人!…

信息泄露威胁:日本科技巨头遭网络攻击,超40万条数据悬崖边缘!

11月27日下午&#xff0c;日本最主要通讯应用程序Line的运营商、日本LY公司发布公告称&#xff0c;有攻击者通过附属公司的NAVER Cloud系统访问了其内部服务器&#xff0c;可能泄露了数十万条包含用户、员工和业务合作伙伴在内的数据。 这一数据泄露事件发生在10月9日&#xff…

关于你对 Zookeeper 的理解

看看普通人和高手是如何回答这个问题的&#xff1f; 普通人 Zookeeper 是一种开放源码的分布式应用程序协调服务 是一个分布式的小文件存储系统 一般对开发者屏蔽分布式应用开发过过程种的底层细节 用来解决分布式集群中应用系统的一致性问题 高手 对于 Zookeeper 的理解…

并发编程笔记

1、前言 这篇笔记是我花的20多天跟着⿊⻢的并发编程学习做的笔记&#xff0c;地址是b站 ⿊⻢ 并发编程 &#xff0c;也是我第⼀次 学习并发 编程&#xff0c;所以如果有很多原理讲不清楚的&#xff0c;知识点不全的&#xff0c;也请多多包涵 中间多数图都是直接截⽼师的笔记…

基于Java SSM框架+Vue实现疫情期间医院门诊网站项目【项目源码+论文说明】

基于java的SSM框架Vue实现疫情期间医院门诊网站演示 摘要 21世纪的到来&#xff0c;国家的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;智能科技时代崛起的优势&#xff0c;医院门诊管理系统当然也不能排除在外。疫情期间医院门诊管理系统是以实际运用为开发背…

【JVM系列】Class文件分析

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

网工学习6-配置和管理 VLAN

6.1VLAN概念 1> 什么是 VLAN&#xff1f; VLAN 是一种在交换机上划分逻辑网段的二层技术。 2> 为什么要通过交换机划分网段&#xff1f; ① 因为交换机的端口密度比路由器高&#xff0c;并且价格比路由器低&#xff0c;所以组网成本更低。 ② 因为交换机划分网段比…

终端安全管理软件是监控软件吗

有些人在后台问&#xff0c;终端安全管理软件是监控软件吗&#xff1f; 先回答&#xff0c;是监控软件。 因为它具有监控的功能&#xff0c;在很大程度上&#xff0c;是可以用来当做监控软件来用的。 终端安全管理软件是一种集中管理终端设备的软件工具&#xff0c;可以在企业…