vue2-vue中mixin到底是什么?

news2024/11/24 7:04:49

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.coloradmin.cn/o/839774.html

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

相关文章

LeetCode643. 子数组最大平均数 I

题干 给你一个由 n 个元素组成的整数数组 nums 和一个整数 k 。 请你找出平均数最大且 长度为 k 的连续子数组,并输出该最大平均数。 任何误差小于 10^-5 的答案都将被视为正确答案。 示例1: 输入:nums [1,12,-5,-6,50,3], k 4 输出&am…

Matlab中图的最短路径

前言: 图的基本概念: 若想简单绘制图可以利用此网站: 左上角Undirected/Directed是无向图/有向图 左边 0-index ,1-index为0下标,1下标。 Node Count为节点个数 Graph Data:最初尾节点的名称&#xff…

HDFS小文件解决方案---archive归档文件命令

小文件解决方案 背景Archive概述创建archive查看归档文件查看归档之后的样子查看归档文件之前的样子 提取archivearchive注意事项 背景 hdfs并不擅长存储小文件,因为每个文件最少一个block,每个block的元数据都会在namenode占用内存,如果存在…

WAF绕过-漏洞利用篇-sql注入+文件上传-过狗

WAF绕过主要集中在信息收集,漏洞发现,漏洞利用,权限控制四个阶段。 1、什么是WAF? Web Application Firewall(web应用防火墙),一种公认的说法是“web应用防火墙通过执行一系列针对HTTP/HTTPS的安…

Java thymeleaf bug排查记录

刚学Java 做项目时报了一个错误 一时间看的莫名其妙 EL1008E: Property or field createTime cannot be found on object of type java.util.HashMap - maybe not public or not valid? 随即向上排查至第一个报错,发现是thymeleaf渲染时报错。 Exception proces…

ChatGPT下架官方检测工具,承认无法鉴别AI内容

去年底,OpenAI 推出的 ChatGPT ,带来了生成式人工智能涌现的热潮。它不仅能够协助完成撰写邮件、视频脚本、文案、翻译、代码等任务,还能通过学习和理解人类的语言来进行对话,并根据聊天的上下文进行互动。 但随之而来的争议也让人…

代码随想录算法训练营day55

文章目录 Day55 判断子序列题目思路代码 不同的子序列题目思路代码 Day55 判断子序列 392. 判断子序列 - 力扣(LeetCode) 题目 给定字符串 s 和 t ,判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些(也可以…

Java课设--学生信息管理系统(例1)

文章目录 前提一、运行效果二、Text实现类三、Manage选择类四、StudentWay学生方法类五、StudnetSql数据库类 前题 例1为无使用GUI图形界面,例2使用GUI图形界面! 首先自己的JDBC驱动已经接好了,连接自己的数据库没有问题。连接数据库可以看…

Linux Day06

目录 一、printf输出问题 二、复制进程fork 2.1进程 2.2 pid_t fork(void); 注意: 2.3逻辑地址和物理地址 2.4写时拷贝技术 一、printf输出问题 printf 函数并不会直接将数据输出到屏幕,而是先放到缓冲区中,只有一下三种情况满 足&a…

2.文件的逻辑结构

第四章 文件管理 2.文件的逻辑结构 顺序文件采用顺序存储则意味着各个逻辑上相邻的记录在物理上也是相邻的存储的。所以如果第0号记录的逻辑地址为0的话,则i号记录的逻辑为i *L。 特别的如果这个定长记录的顺序文件采用串结构,也就是这些记录的顺序和他…

Python爬虫——爬虫时如何知道是否代理ip伪装成功?

前言 在进行爬虫时,我们可能需要使用代理IP来伪装自己的身份,以避免被网站封禁。如何判断代理IP是否伪装成功呢?本篇文章将围绕这个问题展开讲解,同时提供Python代码示例。 1. 确认代理IP地址 首先,我们需要确认代理…

unity制作FPS射击游戏

文章目录 介绍鼠标移动控制视角行走、奔跑、跳跃、下蹲射击、后坐力、射速、瞄准、弹痕、枪火、抛壳手臂摇摆手枪切枪效果动画状态机玩家血量新地图场景颜色渐变激光墙获取钥匙滑动门NPC属性攻击逻辑终点传送门 介绍 角色动作方面包括行走、奔跑、跳跃、武器切换、弹夹更换、武…

下载Windows 10光盘镜像(ISO文件)

文章目录 下载Windows 10镜像文件 下载Windows 10镜像文件 打开微软官网下载地址 立即下载工具 找到下载工具,双击运行,等待 接受条款,等待 选择为另一台电脑安装介质 选择Windows10,下一步 选择ISO文件,…

嵌入式开发学习(STC51-7-矩阵按键)

内容 按下S1-S16键,对应数码管最左边显示0-F 矩阵按键简介 独立按键与单片机连接时,每一个按键都需要单片机的一个I/O 口,若某单片机系统需较多按键,如果用独立按键便会占用过多的I/O口资源;而单片机 系统中I/O口资…

搜索是什么

1、什么是搜索? 搜索:计算机根据用户输入的关键词进行匹配,从已有的数据库中摘录出相关的记录反馈给用户。 常见的全网搜索引擎,有百度、谷歌这样搜索网站。 除此,搜索技术在垂直领域也有广泛的使用,比如淘…

利用awk筛选给定时间范围内的日志

文章目录 筛选给定时间范围内的日志时间时间戳什么是时间戳? 系统时间 筛选日志时间示例简单示例mktime()函数是什么 进阶示例 筛选给定时间范围内的日志 时间 时间的表示方法: 时间戳系统时间(年月日时间) 时间戳 什么是时间…

Spring Boot读取yml或者properties配置信息

文章目录 Spring Boot读取yml或者properties配置信息方法一:Value获取基本信息,适用于少量信息方法二:通过注解ConfigurationProperties(prefix "spring.datasource")方法三:通过api Environment Spring Boot读取yml或…

Leetcode-每日一题【剑指 Offer 09. 用两个栈实现队列】

题目 用两个栈实现一个队列。队列的声明如下,请实现它的两个函数 appendTail 和 deleteHead ,分别完成在队列尾部插入整数和在队列头部删除整数的功能。(若队列中没有元素,deleteHead 操作返回 -1 ) 示例 1: 输入: [&…

Java判断文件的系统格式编码格式

使用Java判断一个文件的系统格式(亲测可用),比如我们常见的Windows格式的文件,Unixg格式的文件,Mac格式的文件;常常有这样的场景:我们在Windows系统编写的脚步上传到Linux系统执行,执…

ClickHouse(十二):Clickhouse MergeTree系列表引擎 - MergeTree(2)

进入正文前,感谢宝子们订阅专题、点赞、评论、收藏!关注IT贫道,获取高质量博客内容! 🏡个人主页:含各种IT体系技术,IT贫道_Apache Doris,Kerberos安全认证,大数据OLAP体系技术栈-CSDN博客 &…