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…

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…

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…

Stable Diffusion系列课程二:ControlNet

AUTOMATIC1111/stable-diffusion-webui参考B站Nenly视频《零基础学会Stable Diffusion》、视频课件推荐网站:stable-diffusion-art、Civitai(魔法) 、libilibi、AI艺术天堂推荐Stable Diffusion整合资料: NovelAI资源整合、《AI绘…

Vivado使用入门之一:Schematic图

目录 一、前言 二、Schematic类型 2.1 Schematic分类 2.2 RTL ANALYSIS 2.3 SYSTHESIS 2.4 IMPLEMENTATION 三、Schematic功能 3.1 界面工具栏 3.2 右键功能项对比 3.3 右键功能项说明 3.4 逻辑图界面 一、前言 在一个设计中,有时因定位或其他原因需要去查…

【IMX6ULL驱动开发学习】22.IMX6ULL开发板读取ADC(以MQ-135为例)

IMX6ULL一共有两个ADC&#xff0c;每个ADC都有八个通道&#xff0c;但他们共用一个ADC控制器 1.设备树 在imx6ull.dtsi文件中已经帮我们定义好了adc1的节点部分信息 adc1: adc02198000 {compatible "fsl,imx6ul-adc", "fsl,vf610-adc";reg <0x0219…

【Java】智慧工地管理系统源码(SaaS模式)

智慧工地是聚焦工程施工现场&#xff0c;紧紧围绕人、机、料、法、环等关键要素&#xff0c;综合运用物联网、云计算、大数据、移动计算和智能设备等软硬件信息技术&#xff0c;与施工生产过程相融合。 一、什么是智慧工地 智慧工地是指利用移动互联、物联网、智能算法、地理信…

向日葵远程情况下VS2019黑屏问题解决办法

文章目录 一. 电脑在身边情况下二. 只能远程情况下 一. 电脑在身边情况下 直接操作远程的电脑&#xff0c;打开vs&#xff0c;选择工具&#xff0c;点击选项 选择常规&#xff0c;取消勾选 二. 只能远程情况下 远程通过VS打开一个项目&#xff0c;可以看到一片空白 选中VS…

【java安全】CommonsBeanUtils1

文章目录 【java安全】CommonsBeanUtils1前言Apache Commons BeanutilsBeanComparator如何调用BeanComparator#compare()方法&#xff1f;构造POC完整POC 调用链 【java安全】CommonsBeanUtils1 前言 在之前我们学习了java.util.PriorityQueue&#xff0c;它是java中的一个优…

SpringIOC注入的两种方式讲解以及代码示例

Ioc是Spring全家桶各个功能模块的基础&#xff0c;创建对象的容器。 AOP也是以IoC为基础&#xff0c;AOP是面向切面编程&#xff0c;抽象化的面向对象 AOP功能&#xff1a;打印日志&#xff0c;事务&#xff0c;权限处理 AOP的使用会在下一篇文章进行介绍 IoC 翻译为控制反…