vue2中的mixin
mixin的用处:主要用于多个组件内存在重复JS业务逻辑(可以包括methods,mounted,watch等等),将该JS部分代码封装在一个js文件下对外暴露,需要使用的组件进行引用。
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
当多个组件,或者页面使用相同的逻辑,可以考虑使用mixins把公共部分提取。
类似于于封装组件,再把代码导入到组件的意思
什么时候使用mixin?
当多个组件/页面有相同的选项,可以通过mixin抽离公共代码,达到复用效果,类似封装组件.
minxin的缺点:
vue3.0中已经将
mixin
作为备选方案,优先选择使用hook
,也是复用的.因为mixin覆盖性会导致不稳定性.类似全局变量,如果mixin被修改,会造成全局污染.所以使用的时候需要小心
一. 区别
1. mixin混入对象和Vuex的区别
Vuex是状态共享管理,所以Vuex中的所有变量和方法都是可以读取和更改并相互影响的;
mixin可以定义公用的变量或方法,但是mixin中的数据是不共享的,也就是每个组件中的mixin实例都是不一样的,都是单独存在的个体,不存在相互影响的;
mixin混入对象值为函数的同名函数选项将会进行递归合并为数组,两个函数都会执行,只不过先执行mixin中的同名函数;
mixin混入对象值为对象的同名对象将会进行替换,都优先执行组件内的同名对象,也就是组件内的同名对象将mixin混入对象的同名对象进行覆盖
2. 与公共组件的区别
同样明显的区别来再列一遍哈~
组件:在父组件中引入组件,相当于在父组件中给出一片独立的空间供子组件使用,然后根据props来传值,但本质上两者是相对独立的。
Mixins:则是在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的对象与方法,可以理解为形成了一个新的组件。
二. 怎么使用
- 定义一个混入对象
- 把混入对象混入到当前的组件中
三. mixins的特点
1. 方法和参数在各组件内不共享
混合对象中的参数num
组件1中的参数num进行+1的操作
组件2中的参数num未进行操作
效果图:
可以看到,组件1里改变了num里面的值,组件2中的num值还是混入对象里的初始值,所以mixins中的方法和参数在各组件内不共享
2. 值为对象的选项,如methods,components等,选项会被合并,键冲突的组件会覆盖混入对象的
混入对象中的方法
组件中的方法
打印结果:
结果显示同名的methods或者components混入对象中的方法会被组件中的方法覆盖点,从而打印出来的是func_two from template1
3. 值为函数的选项,如created,mounted等,就会被合并调用,混合对象里的钩子函数在组件里的钩子函数之前调用
混入对象函数中的console
组件函数中的console
打印结果:
结果显示,当有相同的函数(created,mounted)混合对象内的钩子函数将在组件内的钩子函数前调用执行
vue2中的mixin相关推荐
- 组合式 API如何解决vue2中mixin的局限性?
Mixin 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能. // 定义一个mixin object const myMixin = {created() {this.hello()}, ...
- 什么是Mixin?带你了解Vue中的Mixin混入
什么是Mixin?本篇文章带大家了解一下Vue中的Mixin混入,介绍Mixin和Vuex的区别,Mixin的使用方法,希望对大家有所帮助! Vue框架现在基本上已经占据了前端的半壁江山,Vue的数据 ...
- Python中的Mixin详解
一些闲聊: Mixin是一种设计模式.设计思想 并不是某个特定的class或者函数. Java中的Mixin叫interface Ruby中的Mixin叫Module [2]优点: 1.mixin设计 ...
- aspects_具有Aspects的Java中的Mixin –用于Scala特性示例
aspects Scala特征允许将新行为混合到一个类中. 考虑两个特征,可以向JPA实体添加审核和与版本相关的字段: package mvcsample.domainimport javax.per ...
- 具有Aspects的Java中的Mixin –用于Scala特性示例
Scala特征允许将新行为混合到一个类中. 考虑两个特征,可以向JPA实体添加审核和与版本相关的字段: package mvcsample.domainimport javax.persistence ...
- [css] 你有用过sass中的Mixin功能吗?它有哪些作用?
[css] 你有用过sass中的Mixin功能吗?它有哪些作用? 1.混合用法 2.函数用法1. @mixin ellipsis-one {overflow: hidden;text-overflow ...
- Ruby中的Mixin
当我们谈到继承,我们通常会分开为接口继承和实现继承.如果是单继承,无论是实现继承还是接口继承,都容易理解和使用.即便如此,在C++的著作中,还是提到当我们在继承一个类的时候,不仅仅要想到继承了实现,还 ...
- 【Vue2.0】—mixin混入 (十五)
[Vue2.0]-mixin混入 (十五) 局部混入 <template><div><h2 @click="showName">学生姓名:{{n ...
- 在Vue.js中使用Mixin
有一种很常见的情况:有两个非常相似的组件,他们的基本功能是一样的,但他们之间又存在着足够的差异性,此时的你就像是来到了一个分岔路口:我是把它拆分成两个不同的组件呢?还是保留为一个组件,然后通过prop ...
最新文章
- ASP.NET MVC应用程序展示RDLC报表
- Windows10怎么创建后门?
- ABAP ALV检查单元格更新数据
- iOS GCD, 同步,异步,串行队列,并行队列,dispatch_group
- TypeError: object.__init__() takes no parameters异常报错分析
- React路由 + 绝对路径引用
- 【SpringBoot】使用Maven添加jQuery、bootstrap等依赖(WebJars)
- 阿里Java编程规约(控制语句)
- 设计java application程序_下面哪些步骤是Java Application程序的建立及运行的步骤( )...
- AI和IOT的结合:现在和未来
- php7 php.ini 没有mysql_php7的配置文件里没有mysql.default_socket吗?
- python怎样查看describe的结果_Python学习第126课--pandas拿到数据后的总体描述
- Spring day03笔记
- Reinforcement Learning[论文合集]
- 浅谈SSM框架原理及使用
- 机器学习实战——决策树
- python怎么输出变量加文字书名_python的交互模式怎么输出名文汉字
- Android百大框架排行榜
- FxCAD实验一 简单图形的绘制
- matlab用ifft,ifft(matlab中ifft是什么意思)
热门文章
- 想象力的再突破!无人机后还有大招?!
- ClassNotFoundException: org.apache.flink.shaded.guava18.com.google.common.collect.Lists
- Jmeter的使用(一)
- “Handler中有Loop死循环,为什么没有阻塞主线程,原理是什么?”
- 昆仑mcp文件是什么版本_高性价比重疾险昆仑健康保,12月31日截止投保,想要要趁早!...
- C#批量转CSV到Excel
- nginx同一个地址端口代理多个页面
- 二叉树、二叉搜索树,平衡二叉树(旋转)红黑树(红黑规则)
- 西门子et200 分布式i/o_西门子S7-1500H冗余系统硬件及网络结构
- 人工智能必读书籍推荐—“花书”/计算机视觉/深度学习书籍