记录vue中对mixin的理解

官网:混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

个人理解:写一个混入对象,这个对象就是一个组件里,除开HTML剩下的export defalut{}里面的全部内容,包括data、methods之类的都可以被混入到组件里,这就老厉害了。

然后下载个源码来看看他的原理,我下的是2.6.12版本!

1.初始化mixin

image.png

代码简单,这里的options指的是组件里面的data、methods之类将被混入合并的参数。其实他主要靠的是mergeOptions()函数来实现

2.mergeOptions()函数-merge顾名思义是合并参数!

image.png

mergeOptions()函数的用意就是递归循环组件和mixin里面的data、methods、computed、watch等数据,并在发生冲突时以组件数据优先,而mergeFiedld()方法才是合并操作哦。

3.这时候我们还要找找strat对象

image.png

image.png

image.png

strat对象里就挂着我们通常用到的data、props、methods、computed、watch等数据,这时候我们也比较好奇,他是怎样合并函数和data的,然而mergeDataOrFn()方法就写明白了

4.mergeDataOrFn()方法

image.png

最后,真正合并data和函数的方法是mergeData()

5.mergeData()方法

image.png

这时候可以看出,mergeData方法还是递归循环组件和mixin里面的data、methods、computed、watch等数据,对比组件和mixin的参数,如果key相同,保留组件的。这时候,我们明白了混入一个对象后,干的是合并的工作!合并后,mixin里面的data和方法就可以在组件里面使用了。

使用:

image.png

这里要注意的是,mixin是优先于组件的data或者函数调用的,这样才能把mixin对象的数据合并到组件里的,所以加载的数据和函数都已自身组件的加载顺序为准,即:name > mixin > components > data > watch > computed > created > mounted > methods > updated > destroyed

最后附上个人理解的mixin和vuex、mixin和组件

mixin和vuex

mixin可以自定义变量提供给多个组件使用,vuex更是全局的状态管理,某种程度上这两者的功能是一样的。mixin是被合并到父组件本身,而每个组件的变量是独立的,所以组件内修改mixin的数据是单独修改,这跟vuex全局状态管理是明显的区别

mixin和组件

组件被引入,是在父组件里单独开辟一个空间给子组件使用,是独立的两个组件并行。而mixin作为一个被合并的对象引入到父组件中,其作用是为了扩充父组件的数据和方法。

原创文章,作者:我心飞翔,如若转载,请注明出处:https://www.pipipi.net/14746.html

发表评论

登录后才能评论