【vue】Vue2和Vue3中的代码逻辑复用对比(mixins、自定义hook):

文章目录

        • 一、前言:
        • 二、mixins:
            • 【1】mixins是什么?
            • 【2】mixins如何使用?
            • 【3】mixins的一些特性:
            • 【4】mixins的缺点:
        • 三、hook:
            • 【1】Vue3.x中的自定义hook函数是什么?
            • 【2】mixins和Composition API hook解决的区别:


一、前言:

mixins是Vue2.x Options API中常用的代码逻辑抽离手段,在Vue3.x中也同样可以使用。
虽然好用,但其仍有一些比较显著的缺点,而Vue3.x引入的Composition API中的自定义hook。
很好的解决了mixins带来的一些问题,本文将简单的对比一下这两种实现手段。

二、mixins:
【1】mixins是什么?

image.png

【2】mixins如何使用?

image.png

【3】mixins的一些特性:

1.mixins中的生命周期会与引入mixins的组件的生命周期整合在一起调用。
image.png
2.组件的data、methods、filters会覆盖mixins里的同名data、methods、filters。

(1)组件的同名data 会覆盖 mixins的同名data;组件的同名methods 会覆盖 mixins的同名methods;组件的同名filters 会覆盖 mixins的同名filters
(2)虽然是具有相同逻辑的组件,但是每个组件肯定不可能完全100%相同,会有不同的属性或者不同的methods或者filters等。
(3)如果组件里没有写data/methods/filters……等的话,会自动继承mixins里的data/methods/filters…;如果写了就会以组件里定义的data/methods/filters……为准。

3.不同mixin里的同名方法,按照引进的顺序,最后的覆盖前面的同名方法。

比如两个文件mixin1.js、mixin2.js,都有同名方法: test(),且我们的引入顺序是:[mixin1,mixin2],那么最终执行的方法就是mixin2里的 test()

【4】mixins的缺点:

1.变量来源不明确(隐式传入),不利于阅读,使代码变得难以维护。

组件里可以引入多个mixin,并直接隐式调用mixin里的变量/方法,这会让我们有时候混乱 这些变量/方法 分别是哪个mixin里的?

2.多个mixins的生命周期会融合到一起运行,但是同名属性、同名方法无法融合,可能会导致冲突。

比如组件1中的方法要输出属性info,但是组件2中也有同名属性info,且覆盖了组件1中的属性info,那么当执行组件1中的方法时,输出的确实组件2中的属性,这个我们可以避免,但是一不小心就会导致冲突,很容易制造混乱。

3.mixins和组件可能出现多对多的关系,复杂度较高(即一个组件可以引用多个mixins,一个mixins也可以被多个组件引用)。

注:VUE3提出的Composition API旨在解决这些问题。mixins 的缺点是 Composition API 背后的主要动因之一,Composition API 受到 React Hook 的启发。

三、hook:
【1】Vue3.x中的自定义hook函数是什么?

使用Vue3的组合API封装的可复用的功能函数;自定义hook的作用类似于vue2中的mixin技术;自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂

【2】mixins和Composition API hook解决的区别:

image.png

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

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

相关文章

4.【SpringBoot3】文章管理接口开发

序言 在文章管理模块,有以下接口需要开发: 新增文章文章列表(条件分页)获取文章详情更新文章删除文章 数据库表字段和实体类属性: 1. 新增文章 需求分析 当用户点击左侧菜单中的“文章管理”后,页面主…

SpringBoot_基础

学习目标 基于SpringBoot框架的程序开发步骤 熟练使用SpringBoot配置信息修改服务器配置 基于SpringBoot的完成SSM整合项目开发 一、SpringBoot简介 1. 入门案例 问题导入 SpringMVC的HelloWord程序大家还记得吗? SpringBoot是由Pivotal团队提供的全新框架&…

java数据结构与算法刷题-----LeetCode697. 数组的度

java数据结构与算法刷题目录(剑指Offer、LeetCode、ACM)-----主目录-----持续更新(进不去说明我没写完):https://blog.csdn.net/grd_java/article/details/123063846 方法一:hash表 此方法是工作中时间可以使用的,因为…

阅读go语言工具源码系列之gopacket(谷歌出品)----第一集 DLL的go封装

gopacket项目是google出品的golang第三方库,项目源码地址google/gopacket: Provides packet processing capabilities for Go (github.com) gopacket核心是对经典的抓包工具libpcap(linux平台)和npcap(windows平台)的go封装,提供了更方便的go语言操作接…

嵌入式linux学习之系统烧录

1.所需文件 1. 开发板为正点原子stm32mp157,文件可按照linux驱动教程编译,也可在正点原子文档->08、系统镜像\02、出厂系统镜像中找到: 2.烧录 1.拨码开关为000(usb启动),otg接口接入虚拟机,打开stm32cubeProgrammer: 2.页面…

AP5101C 高压线性 LED恒流驱动器 DFN2*2 LED灯汽车雾灯转向灯

产品描述 AP5101C 是一款高压线性 LED 恒流芯片 , 简单 、 内置功率管 , 适用于6- 100V 输入的高精度降压 LED 恒流驱动芯片。电流2.0A。AP5101C 可实现内置MOS 做 2.0A,外置 MOS 可做 3.0A 的。AP5101C 内置温度保护功能 ,温度保护点为 130 …

CQ 社区版 2.8.0 | 支持TiDB、StarRocks,新增列过滤算法、导出模式设置等

Hello,CloudQuery 社区版 2.8.0 已发布,本文将带大家详细解析本次更新的功能~(完整的讲解视频可点击 👉🏻 CloudQuery 社区版2.8.0 功能讲解演示 本期亮点更新 新增支持数据源 TiDB、StarRocks数据保护新增列过滤脱敏…

cmd命令行输出的内容复制粘贴到文本中

cmd程序执行完后按任意键进行结束,无法直接复制命令行里输出的内容,如下图,在Windows系统里按ctrlC,然后该窗口就关闭了,内容也没有复制成功到粘贴板。 解决办法如下: 在上方打开设置 然后在“交互”里打…

JDBC 总结

一、JDBC概述 JDBC(Java DataBase Connectivity)java数据库连接是一种用于执行SQL语句的Java API,可以为多种关系型数据库提供统一访问, 它由一组用Java语言编写的类和接口组成。有了JDBC,java开发人员只需要编写一次程序,就可以…

Linux系统中虚拟文件系统原理与方法

在 Unix 的世界里,有句很经典的话:一切对象皆是文件。这句话的意思是说,可以将 Unix 操作系统中所有的对象都当成文件,然后使用操作文件的接口来操作它们。Linux 作为一个类 Unix 操作系统,也努力实现这个目标。 虚拟文…

E4 基于Mysql的游标定义和应用

一、实验目的: 熟练使用MySQL游标的定义和应用。 二、实验要求: 1、基本硬件配置:英特尔Pentium III 以上,大于4G内存; 2、软件要求:Mysql; 3、时间:1小时; 4、撰写实验报告并按时提交。 三、实验内容: 问题1:请写一个存储…

MTP与管理壳(AAS)有异曲同工之妙

在过去的几年中,流程工业中的不同部门(例如制药、精细化学品以及食品和饮料部门)遇到了一系列共同且可比较的新兴挑战。这些挑战包括: 新产品的需求迅速接连不断,更快交货和更低价格的压力,更多定制产品&a…

【Java并发】聊聊Future如何提升商品查询速度

java中可以通过new thread、实现runnable来进行实现线程。但是唯一的缺点是没有返回值、以及抛出异常,而callable就可以解决这个问题。通过配合使用futuretask来进行使用。 并且Future提供了对任务的操作,取消,查询是否完成,获取结…

代理模式-C#实现

该实例基于WPF实现,直接上代码,下面为三层架构的代码。 目录 一 Model 二 View 三 ViewModel 一 Model using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace 设计模式练…

【Linux】进程间通信——信号量

让大家久等啦,本期我们来讲讲Linux系统中的信号量 目录 一、引入 二、认识信号量 2.1 信号量的概念 2.2 信号量的内核结构 三、关于信号量的接口 3.1 semget 3.2 ipcs -s 3.3 ipcrm -s 3.4 semctl 3.5 semop 四、理解IPC 一、引入 在开始之前我们先来认…

2023.1.21 关于 Redis 主从复制详解

目录 引言 单点问题 分布式系统 主从模式 配置 Redis 主从结构 断开主从关系 切换主从关系 补充知识点一 只读 网络延迟 拓扑结构 一主一从 一主多从 树形主从结构 主从复制的基本流程 数据同步 replicationid offset pzync 运行流程 具体流程 补充知识点二…

C. Doremy‘s City Construction(二分图问题)

思路&#xff1a;把集合划分成两部分,一部分中每个数都比另一部分小,这两部分连成一个完全二分图,这种情况是最优的,还需要特判所有数都相等的情况. 代码&#xff1a; void solve(){int n;cin >> n;vector<int>a(n 1);for(int i 1;i < n;i )cin >> a[…

如何使用iPhone或iPad上的二维码共享Wi-Fi密码?这里有详细步骤

你有没有想过在不泄露网络密码的情况下与客人共享你的家庭或工作Wi-Fi?你肯定不是第一个这样想的人,我们很高兴地通知你,多亏了以下这个的变通方法,你现在可以使用iPhone或iPad做到这一点。 通常,如果你想让其他人访问网络,你需要共享你的Wi-Fi密码。苹果通过引入与任何…

python 学习之 re库的基本使用(正则匹配)上

目录 一、基本用法 二、函数介绍 1、match函数 2、search 函数 3、compile 函数 4、findall 和 finditer 函数 5、sub 函数和 subn 函数 6、split 函数 一、基本用法 首先我们需要引入 re 库 代码基本框架使用两行代码实现 测试代码&#xff1a; import reret re.m…

vue 本地中导入 maptalks

1、进入 github 中 maptalks 文件下载页面&#xff08;https://github.com/maptalks/maptalks.js/releases&#xff09; 这里可能会有朋友应为网络问题打不开 github &#xff0c;可以查看作者另一篇关于解决该问题的文章&#x1f449;GitHub 打不开问题解决 2、将下载好的文件…