vue2-vue中mixin到底是什么?

1、mixin是什么?
Mixin是面向对象程序设计语言中的类,提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类。
Mixin类通常作为功能模块使用,在需要该功能时“混入”,有利于代码的复用又避免了多继承的复杂。
1.1 vue中的mixin
mixin(混入),提供了一种非常灵活的方式,来分发vue组件中可复用功能。
本质上就是一个js对象,它可以包含我们组件中任意功能选项,如data、compents、methods、created、computed等等。
我们只要将公用的功能以对象的方式传入mixins选项中,当组件使用mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来。
在vue中我们可以分为局部混入和全局混入。
局部混入:定义一个mixin对象,有组件options的data、methods属性。
在这里插入图片描述
组件通过mixins属性调用mixin对象。
在这里插入图片描述
该组件在使用的时候,混合了mixin里面的方法,在自动执行created生命钩子,执行hello方法。

全局混入:通过vue.mixin()进行全局的混入。
在这里插入图片描述
使用全局混入需要特别的注意,因为它影响到每一个组件实例(包括第三方组件)
PS:全局混入常用于插件的编写。
注意事项:当组件存在与mixin对象相同的选项的时候,进行递归合并的时候组件的选项会覆盖mixin的选项,但是如果相同选项为生命周期钩子的时候,会合并成一个数组,先执行mixin的钩子,再执行组件的钩子。

2、使用场景
日常开发中,经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码,这些代码的功能相对来说相对独立,这时可以通过vue的mixin功能将相同或者相似的代码提出来。
举个例子:定义一个modal弹窗组件,内部通过isShowing来控制显示。
在这里插入图片描述
定义一个tooltip提示框,内部通过isShowing来控制提示。
在这里插入图片描述
通过观察上面的组件,发现两者的逻辑是相同的,代码控制也是相同的,这时候mixin就派上了用场。
首先抽离出共同代码,编写一个mixin
在这里插入图片描述
两个组件在使用上只需要引入mixin。

在这里插入图片描述
通过上面的例子,我们可以知道,Mixin对于封装一些可复用的功能如此方便和有趣。

3、源码分析
源码位置:/src/core/global-api/mixin.js
在这里插入图片描述
主要是调用merOptions方法
源码位置:/src/core/util/options.js

在这里插入图片描述在这里插入图片描述
从上面源码,可以得到以下几点:
优先递归处理mixins
先遍历合并parent中的key,调用mergeField方法进行合并,然后保存在变量options
再遍历child,合并补上parent中没有的key,调用mergeField方法进行合并,然后保存在变量options
通过mergeField函数进行合并

下面是关于vue的几种类型的合并策略
替换型
合并型
队列型
叠加型

替换型合并有props、methods、inject、computed
在这里插入图片描述
同名的props、methods、inject、computed会被后来者代替

合并型:有data
在这里插入图片描述
在这里插入图片描述
mergeData函数遍历了要合并的data的所有属性,然后根据不同情况进行合并。
当目标data对象不包含当前属性时,调用set方法进行合并(set方法其实就是一些合并并重新赋值的方法)
当目标data对象包含当前属性并且当前值为纯对象时,递归合并当前对象值,这样做是为了防止对象存在新增属性。

队列型:合并的有全部生命周期和watch
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
生命周期钩子和watch被合并为一个数组,然后正序遍历一次执行。

叠加型:可以合并component、directives,filters
在这里插入图片描述
叠加型主要是通过原型链进行层层的叠加。

小结:
替换策略有props、methods、inject、computed,就是将新的同名参数替代旧的参数
合并型策略是data,通过set方法进行合并和重新赋值。
队列型策略有生命周期和watch,原理是将函数存入一个数组,然后正序遍历依次执行。
叠加型有component、directives、filters,通过原型链层层叠加。

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

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

相关文章

stl_list类(使用+实现)(C++)

list 一、list-简单介绍二、list的常用接口1.常见构造2.iterator的使用3.Capacity和Element access4.Modifiers5.list的迭代器失效 三、list实现四、vector 和 list 对比五、迭代器1.迭代器的实现2.迭代器的分类(按照功能分类)3.反向迭代器(1)、包装逻辑…

wpf画刷学习1

在这2篇博文有提到wpf画刷, https://blog.csdn.net/bcbobo21cn/article/details/109699703 https://blog.csdn.net/bcbobo21cn/article/details/107133703 下面单独学习一下画刷; wpf有五种画刷,也可以自定义画刷,画刷的基类都…

Maven分模块-继承-聚合-私服的高级用法

Maven分模块-继承-聚合-私服的高级用法 JavaWeb知识,介绍Maven的高级用法!!! 文章目录 Maven分模块-继承-聚合-私服的高级用法1. 分模块设计与开发1.1 介绍1.2 实践1.2.1 分析1.2.2 实现 1.3 总结 2. 继承与聚合2.1 继承2.1.1 继承…

无人机巢的作用及应用领域解析

无人机巢作为无人机领域的创新设备,不仅可以实现无人机的自主充电和电池交换,还为无人机提供安全便捷的存放空间。为了帮助大家更好地了解无人机巢,本文将着重解析无人机巢的作用和应用领域。 一、无人机巢的作用 无人机巢作为无人机技术的重…

【chrome扩展开发】vue-i18n使用问题及解决方案

记录chrome扩展开发时调用vue-i18n的一些问题和解决方法 环境 vue: ^3.3.4vue-i18n: ^9.2.2vite: ^4.4.8 错误1 Uncaught (in promise) EvalError: Refused to evaluate a string as JavaScript because unsafe-eval is not an allowed source of script in the following Con…

Spring Bean的生命周期

文章目录 Spring Bean的生命周期加载Bean对象创建Bean对象构造对象填充属性初始化实例注册销毁 销毁 Spring Bean的生命周期 Spring Bean的生命周期就是指Bean对象从创建到销毁的过程,大体可以分为:实例化、属性赋值、初始化、使用、销毁。 加载Bean对象…

Modelsim打开后报unable to checkout a viewer license

找到Modelsim安装包中的MentorKG.exe文件和patch64_dll.bat文件,将这两个文件拷贝到Modelsim安装目录中的win64文件夹: 在win64文件夹中找到mgls64.dll,将它拷贝粘贴一份后修改名字为mgls.dll: 双击win64文件夹中的patch64_dll.ba…

【C++】数据结构与算法:常用排序算法

😏★,:.☆( ̄▽ ̄)/$:.★ 😏 这篇文章主要介绍常用排序算法。 学其所用,用其所学。——梁启超 欢迎来到我的博客,一起学习,共同进步。 喜欢的朋友可以关注一下,下次更新不迷路&#x1…

【前端版】分布式医疗云平台【Open-his 环境搭建、前台 vue-element-ui 搭建】(十六)

目录 1、Open-his 环境搭建 1.1.【前端】vue-element-ui-admin 1.2.【前端】安装 node 服务器 1.3.【前端】安装 VSCode

python字符串常用操作

目录 1. find() 字符串查找2. 字符串匹配 6 种方法 1. find() 字符串查找 python字符串find的应用 查找到字符串的位置,给出所在字符串的下标位置。如下给出的只是下标第6个: a "伤感上单乱杀" # 01 23 4 567 print(a.find("乱杀&…

什么是SYN攻击

SYN攻击属于DOS攻击的一种,它利用TCP协议缺陷,通过发送大量的半连接请求,耗费CPU和内存资源。TCP协议建立连接的时候需要双方相互确认信息,来防止连接被伪造和精确控制整个数据传输过程数据完整有效。所以TCP协议采用三次握手建立…

Red Hat 安装MySQL 8.0与 Navicat

目录 Red Hat 安装 MySQL 8.0 1、更新软件包列表 2、安装MySQL服务器和客户端 3、启动MySQL服务 4、确保MySQL服务器正在运行 5、root 用户的密码 6、登录MySQL,输入mysql密码 7、MySQL默认位置 Red Hat 安装 Navicat 1、下载 Navicat 2、执行命令 Red H…

【单片机】晨启科技,酷黑版,密码锁

密码锁 任务要求: 当输入密码(至少6位密码)时,OLED显示屏显示输入的数字(或者字符),当密码位数输入完毕按下确认键时,对输入的密码与设定的密码进行比较(可使用外设键盘&…

数字化转型的本质、路径、阶段和挑战一篇讲明白

01企业数字化转型的本质 数字化可以将人类所处的真实世界和虚拟数字连接起来,从中寻求全新的商业模式。数字化转型基于数字化新技术出现和发展,能够帮助企业将原有传统业务与数字化技术进行结合,以解决企业发展过程中的实际问题,同…

Spark知识点总结

1. Spark支持哪几种运行模式? 本地模式(Local Mode):在这种模式下,Spark在单个机器上运行。所有的Spark操作都在一个单独的JVM进程中进行。这种模式适合开发和测试,但不适合处理大规模的数据。 集群模式&a…

C语言--strcat(拼接)

字符串拼接strcat使用及实现 拼接—strcat 原型:charstrcat(chardest,const charsrc) 把src所指向的字符串(包括’\0’)复制到dest所指向的字符串后面(删除dest原来末尾的’\0’),要保证dest足够长&#xf…

STM32的电动自行车信息采集上报系统(学习)

摘要 针对电动自行车实时监管不便的问题,设计了一种基于STM32的电动自行车信息采集系统,通过获取电池、位置和行驶状态信息并上报到服务器中,实现实时监管。 通过多路串口请求电池、行驶状态和位置信息,以并发方式进行数据接收、…

Podman Desktop安装与使用-Windows10

下载 containers/podman 地址 Podman Desktop Downloads 地址 我这里演示的是podman-v4.4.4.msi和podman-desktop-0.13.0-setup.exe 安装 先决条件:由于 Podman 使用 WSL,因此您需要最新版本的 Windows 10 或 Windows 11。在 x64 上,WSL…

centos 7 系统上重启 mysql 时报错 Failed to restart mysqld.service: Unit not found.

在 centos 7 系统上,使用常规命令:systemctl restart mysql 或 service mysqld restart 重启 mysql 时都会报如下错误: Failed to start mysqld.service: Unit not found. 根据所报错误,在网上搜罗了一圈,未果&#x…

【Unity3D应用案例系列】Unity3D中实现文字转语音的工具开发

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址我的个人博客 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 一、前言 在开发中,会遇到将文字转语音输出的需求&#xff0…