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.hqwc.cn/news/59480.html

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

相关文章

Redis储存结构

Redis怎么储存的 这个redisDb是数据库对象 里面的其他字段忽略了 然后里面有个dict列表(字典列表) 我们随便来看一个redisObject 区分一下子啊 他这个dict里面没有存redisObject的对象 也没有存dict对象 它只是存了个数据指针 你看那个redis每个底层编码 抠搜的 这块要是再保存…

门面模式(C++)

定义 为子系统中的一组接口提供一个一致(稳定) 的界面,Facade模式定义了一个高层接口,这个接口使得这一子系统更加容易使用(复用)。 应用场景 上述A方案的问题在于组件的客户和组件中各种复杂的子系统有了过多的耦合,随着外部客户程序和各子…

Java数据类型,一文带你彻底拿捏~

——Java中运算符是一种特殊的符号,用来进行数据的运算、赋值和比较等 思维导图 一.算术运算符 1.什么是算术运算符 ——算术运算符是用于数据类型值之间,使用2个或以上的数据进行运算 2.算术运算符概括 算术运算符 解释示例,-正号&…

面试热题(滑动窗口最大值)

给你一个整数数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 输入:nums [1,3,-1,-3,5,3,6,7], k 3 输出:[3,3,5,…

后端进阶之路——深入理解Spring Security配置(二)

前言 「作者主页」:雪碧有白泡泡 「个人网站」:雪碧的个人网站 「推荐专栏」: ★java一站式服务 ★ ★前端炫酷代码分享 ★ ★ uniapp-从构建到提升★ ★ 从0到英雄,vue成神之路★ ★ 解决算法,一个专栏就够了★ ★ 架…

Spring Security6入门及自定义登录

一、前言 Spring Security已经更新到了6.x,通过本专栏记录以下Spring Security6学习过程,当然大家可参考Spring Security5专栏对比学习 Spring Security5专栏地址:security5 Spring Security是spring家族产品中的一个安全框架,核心功能包括…

消息队列比较

、ActiveMQ 优点:单机吞吐量万级,时效性ms级,可用性高,基于主从架构实现高可用性,消息可靠性较低的概率丢失数据。 缺点:官方社区现在对ActiveMQ5.X维护越来越少了,高吞吐量场景较少使用。 2、K…

专业的ADAS测试记录仪ETHOS

随着ADAS驾驶辅助系统技术的快速发展及日臻成熟,近年来ADAS在全球汽车市场已开始快速普及和商业化,而如何确保ADAS系统的可靠和安全俨然成为汽车领域的重要问题。因此,ADAS驾驶辅助系统的测试也成为了各大整车厂及零部件厂商所关注的焦点。 一…

发现 SaaS 专业服务的潜力,实现优质的客户支持

您正拥有优秀的产品或服务、引人注目的网站和不断增长的客户群,一切都很顺利,但有一件事让您夜不能寐:客户支持!您想为客户提供一流的服务,但您发现教整个团队怎样以让每个客户都满意的方式处理客户查询,还…

Vulkan 绘制显示设计

背景 众所周知,Vulkan是个跨平台的图形渲染API,为了友好地支持跨平台,Vulkan自然也抽象出了很多接口层去对接各个操作系统,抹平系统间的差异,Swap Chains即为WSI。 其本质上是一种图像队列,此队列会按顺序…

Celery的基本使用

1.Celery介绍 1.1 Celery是什么? Celery是Python开发的简单、灵活可靠的、处理大量消息的分布式任务调度模块专注于实时处理的异步任务队列同时也支持任务调度 Celery本身不含消息服务,它使用第三方消息服务来传递任务,目前,Ce…

Linux 终端操作命令(2)内部命令分类

Linux 终端操作命令 也称Shell命令,是用户与操作系统内核进行交互的命令解释器,它接收用户输入的命令并将其传递给操作系统进行执行,可分为内部命令和外部命令。内部命令是Shell程序的一部分,而外部命令是独立于Shell的可执行程序…