Vue3使用的Compostion Api和Vue2使用的Options Api有什么不同?

我们介绍Compostion Api和Options Api的区别之前,先来说一下为什么会推出来Composition
Api,解决了什么问题?

Vue2开发项目使用Options Api存在的问题

  • 代码的可读性和维护性随着组件的变大业务的增多而变得差
  • 代码的共享和重用性存在缺点
  • 不支持TS语法

上面存在的问题我们使用Compostion Api都可以完美的解决掉

一、Options Api

1、设计的出发点:

  • 包含一个描述组件选项 ( data, methods, props 等) 的对象
  • Options APi 开发复杂组件,同一个功能逻辑的代码被拆分到不同选项

2、示例如下:
在这里插入图片描述
在这里插入图片描述

可以看到 Options 代码编写方式,如果是组件状态,则写在 data 属性上,如果是
方法,则写在 methods 属性上…
用组件的选项 (data、computed、methods、watch) 组织逻辑在大多数情况下都有

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

二、Compostion Api (组合式API)

1、设计的出发点:

  • Vue.js 3.0 新增的一组 API
  • 一组基于函数的 API
  • 可以更灵活的组织组件的逻辑

2、示例如下:

在这里插入图片描述
在这里插入图片描述
在 Vue3 Composition API 中,组件根据逻辑功能来组织的,一个功能所定义的所
有 API 会放在一起(更加的高内聚,低耦合
即使项目很大,功能很多,我们都能快速的定位到这个功能所用到的所有 API

三、二者的区别对比

我们可以从两个方面进行区别对比:

  • 逻辑组织
  • 逻辑复用

1- 逻辑组织
假设一个组件是一个大型组件,其内部有很多处理逻辑

我们使用Options 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}},
});

二者的Demo具体对比如下:
在这里插入图片描述
1- 逻辑复用
处理复杂多个组件没关联时候,我们在vue2里面有用过mixin去复用相同的逻辑
示例如下:

在vue2我们会另起一个 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/580912.shtml

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

相关文章

【Linux】进程查看|fork函数|进程状态

&#x1f984; 个人主页——&#x1f390;开着拖拉机回家_Linux,大数据运维-CSDN博客 &#x1f390;✨&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&am…

H.264宏块(Macroblock)概念(运动估计、变换编码、环路滤波)

参考文章&#xff1a;音视频高手课系列5-h264编码基础(宏块原理) 参考文章&#xff1a;切片slice与宏块&#xff0c;运动矢量 文章目录 使用videoEye分析视频宏块示例H.264宏块概念1. 宏块的定义2. 运动估计3. 变换编码4. 环路滤波5. 注意&#xff1a;宏块的概念既适用于帧内编…

基于Java Swing的图书管理系统

一、项目总体架构 本项目基于Java Swing框架&#xff0c;数据库采用的是MySQL。项目文件夹如下&#xff1a; 二、项目截图 1.登录和注册界面 2.用户界面 3.管理员管理图书类别 4.管理员管理书籍 5.管理员管理用户 项目总体包括源代码和课程论文&#xff0c;需要源码的…

Go语言实现KV存储系统:前言

文章目录 前言前提条件持久索引并发总结 前言 你好&#xff0c;我是醉墨居士&#xff0c;最近想做一些存储方面的东西玩玩&#xff0c;我第一时间就想到了能不能自己开发一个保存键值对的存储系统 我找了些资料&#xff0c;准备使用Go语言实现一下&#xff0c;想着有想法咱就…

通过MobaXterm远程连接Anolis

目录 前言&#xff1a; 一.设置ip 二.远程连接 前言&#xff1a; 小编已经阐述了如何安装Anolis系统&#xff0c;如果有不了解的小伙伴可以查看这一篇博客Anolis安装 这篇博客将会讲述如何远程连接Anolis系统。各位看官拿好板凳&#xff01; 一.设置ip 打开网卡所在位…

西门子PLC通过PROFINET协议与多功能电表通讯

西门子PLC通过PROFINET协议与多功能电表通讯 项目要求 西门子S71200PLC需要通过PROFINET协议和多功能电表通讯&#xff0c;读取线电压、相电压、线电流、相电流、有功功率、无功功率等参数。 项目实施 采用网关NET90-PN-MBT&#xff08;以下简称“网关”&#xff09;&#…

Java开发框架和中间件面试题(9)

102.你了解秒杀吗&#xff1f;怎么设计&#xff1f; 1.设计难点&#xff1a;并发量大&#xff0c;应用&#xff0c;数据库都承受不了。另外难控制超卖。 2.设计要点&#xff1a; 将请求尽量拦截在系统上游html尽量静态化&#xff0c;部署到cdn上面。按钮及时设置为不可用&…

【Java面试题】redis的过期策略有哪些

redis通过设置过期时间来控制键值对的存活时长&#xff0c;过期时间可以通过expire , pexpire expireat , pexpireat 等命令设置&#xff0c;String 类型数据可以通过setex命令设置过期时间。 以下介绍三种redis的过期策略&#xff1a; 1. 定时删除 在设置键值对的过期时…

数据库概念学习

1. mysql默认的事物级别 MySQL 默认的隔离级别是可重复读&#xff08;REPEATABLE READ&#xff09;。 PostgreSQL 中&#xff0c;默认的隔离级别是读已提交&#xff08;READ COMMITTED&#xff09; 可重复读隔离级别是 MySQL 的默认隔离级别&#xff0c;它具有以下特点&#x…

Spring Data 灵活查询的三种方式

在页面中展示列表数据时&#xff0c;通常需要根据用户输入的不同的查询条件返回不同的查询结果&#xff0c;传统的方式往往采用手动编写原始sql拼接where条件的方式&#xff0c;这种方式并不安全&#xff0c;容易存在sql注入漏洞。 本文介绍用SpringDataJpa实现灵活查询的方式…

C# 委托(Delegate)

C# 委托&#xff08;Delegate&#xff09; C# 委托&#xff08;Delegate&#xff09;声明委托&#xff08;Delegate&#xff09;实例化委托&#xff08;Delegate&#xff09;委托的多播&#xff08;Multicasting of a Delegate&#xff09;委托&#xff08;Delegate&#xff09…

怎么提取视频中的背景音乐?

当我们在刷视频的时候&#xff0c;有时候听到一个背景音乐很好听&#xff0c;但是又不知道歌名&#xff0c;比如英语歌&#xff0c;这个时候我们很难找到这首歌&#xff0c;相信有很多朋友会遇到这样的问题&#xff0c;不知道怎么弄&#xff0c;下面小编给大家推荐一些方法帮助…

MySQL数据表加密字段支持模糊查询的方案

AES_ENCRYPT函数和AES_DECRYPT,需要注意的是&#xff0c;加密后的字段需要用blob做存储&#xff0c;如果用varchar存储会报1366错误。 Mysql本身自带的加密方法&#xff0c;分为2种&#xff1a; 1、不可逆加密算法&#xff1a; PASSWORD&#xff0c;ENCRYPT&#xff0c;MD5&…

名词+of+名词+非谓语动词短语的结构

一、英语中 名词 of 名词 that .,that后面的定语从句修饰的是of前面的名词还是后面的名词?如果是前面或者后面,要反过来怎么搞? eg;There are some present of you that jam sent you yesterday.(这里有一些吉姆昨天送的你的礼物&#xff09;1&#xff09; present of you可…

Pytorch从零开始实战14

Pytorch从零开始实战——DenseNet SENet算法实战 本系列来源于365天深度学习训练营 原作者K同学 文章目录 Pytorch从零开始实战——DenseNet SENet算法实战环境准备数据集模型选择开始训练可视化总结 环境准备 本文基于Jupyter notebook&#xff0c;使用Python3.8&#x…

亿赛通电子文档安全管理系统 linkfilterservice 未授权漏洞

产品简介 亿赛通电子文档安全管理系统&#xff0c;&#xff08;简称&#xff1a;CDG&#xff09;是一款电子文档安全加密软件&#xff0c;该系统利用驱动层透明加密技术&#xff0c;通过对电子文档的加密保护&#xff0c;防止内部员工泄密和外部人员非法窃取企业核心重要数据资…

TS常用类型

原始类型使用 // 原始类型使用 let age: number 18let myName: string 前端let isLoding: boolean falselet a: null nulllet b: undefined undefinedlet s:symbol Symbol()数组类型使用 // 数组类型的两种写法// 写法一 let numbers: number[] [1, 2, 3] // 数值类型…

Spring企业开发核心框架

文章目录 Spring企业开发核心框架一、框架前言1. 总体技术体系2. 框架概念和理解 二、Spring Framework简介1. Spring 和 SpringFramework2. SpringFramework主要功能模块3. SpringFramework 主要优势 三、Spring IoC 容器概念1. 组件和组件管理概念2. Spring IoC容器和容器实现…

ALS-运动系统解构

角色握持 角色蓝图&#xff1a;将物体绑在手上 动作蓝图&#xff1a; 将握持动画截取一帧&#xff08;explicit time时间写好&#xff09; 角色替换 在原人物模型下面加一个骨骼体&#xff08;先不用添加模型&#xff09;&#xff0c;重命名为bodymesh AI使用流程 新建一…

品牌如何在线上打造“社交货币”?媒介盒子揭秘

品牌的社交货币&#xff0c;是品牌与消费者的共识身份铸造器。竹筒奶茶、Keep奖牌这类的实体产品作为社交货币&#xff0c;每每能够引爆社交平台&#xff0c;那么品牌能否通过线上平台打造“社交货币”呢&#xff1f;接下来就让媒介盒子和大家聊聊。 一、社交货币是什么 社交货…