vue-3 Mixin使用

概念:混入 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.不好追溯源,排查问题稍显麻烦

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容