概念:混入 Mixin提供了一种非常灵活的方式,来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项
通俗:将组件的公共逻辑或者配置提取出来,哪个组件需要用到时,直接将提取的这部分混入到组件内部即可。减少代码冗余,也方便后期维护。
注意:提取的是逻辑或配置,而不是HTML代码和CSS代码。Mixin就是组件中的组件,Vue组件化让我们的代码复用性更高,组件与组件之间还有重复部分,可以使用Mixin抽离一遍
定义:Mixin是一个对象,包含Vue组件中的常见配置,如,data、methods、created等。可以局部混入和全局混入,局部混入和组件中的按需加载类似,需要用到mixin中的代码时,在组件中引用他。全局混入,则代表我在项目的任何组件中都可以使用mixin。
Mixin中的生命周期函数会和组件的生命周期函数一起合并执行
Mixin中的data数据在组件中也可以使用
Mixin中的方法在组件中内部可以直接调用
生命周期函数合并后执行顺序:先执行Mixin中的,后执行组件中的
问题 1:一个组件中改变了Mixin中的数据,另一个引用了Mixin的组件会受影响吗
不会。不同组件中的Mixin是相互独立的
选项合并:
1)生命周期函数:确切来说,这种不算冲突,因为生命周期函数的名称都是固定的,会先执行Mixin中生命周期函数中的代码,然后执行组件内部的代码。
2)data数据冲突:Mixin中的data数据与组件中的data数据冲突时,组件中的data数据会覆盖Mixin中数据
对基本类型是覆盖
对对象是合并
对数组是覆盖
对钩子是都执行,先Mixin再组件
3)方法冲突:覆盖
优点:
1.提高代码复用性
2.无需传递状态
3.维护方便,只需要修改一个地方即可
缺点:
1.命名冲突
2.滥用的话后期很难维护
3.不好追溯源,排查问题稍显麻烦