vue2-vue中mixin到底是什么?

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属性。
vue2-vue中mixin到底是什么?_第1张图片
组件通过mixins属性调用mixin对象。
vue2-vue中mixin到底是什么?_第2张图片
该组件在使用的时候,混合了mixin里面的方法,在自动执行created生命钩子,执行hello方法。

全局混入:通过vue.mixin()进行全局的混入。
vue2-vue中mixin到底是什么?_第3张图片
使用全局混入需要特别的注意,因为它影响到每一个组件实例(包括第三方组件)
PS:全局混入常用于插件的编写。
注意事项:当组件存在与mixin对象相同的选项的时候,进行递归合并的时候组件的选项会覆盖mixin的选项,但是如果相同选项为生命周期钩子的时候,会合并成一个数组,先执行mixin的钩子,再执行组件的钩子。

2、使用场景
日常开发中,经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码,这些代码的功能相对来说相对独立,这时可以通过vue的mixin功能将相同或者相似的代码提出来。
举个例子:定义一个modal弹窗组件,内部通过isShowing来控制显示。
vue2-vue中mixin到底是什么?_第4张图片
定义一个tooltip提示框,内部通过isShowing来控制提示。
vue2-vue中mixin到底是什么?_第5张图片
通过观察上面的组件,发现两者的逻辑是相同的,代码控制也是相同的,这时候mixin就派上了用场。
首先抽离出共同代码,编写一个mixin
vue2-vue中mixin到底是什么?_第6张图片
两个组件在使用上只需要引入mixin。

vue2-vue中mixin到底是什么?_第7张图片
通过上面的例子,我们可以知道,Mixin对于封装一些可复用的功能如此方便和有趣。

3、源码分析
源码位置:/src/core/global-api/mixin.js
vue2-vue中mixin到底是什么?_第8张图片
主要是调用merOptions方法
源码位置:/src/core/util/options.js

vue2-vue中mixin到底是什么?_第9张图片vue2-vue中mixin到底是什么?_第10张图片
从上面源码,可以得到以下几点:
优先递归处理mixins
先遍历合并parent中的key,调用mergeField方法进行合并,然后保存在变量options
再遍历child,合并补上parent中没有的key,调用mergeField方法进行合并,然后保存在变量options
通过mergeField函数进行合并

下面是关于vue的几种类型的合并策略
替换型
合并型
队列型
叠加型

替换型合并有props、methods、inject、computed
vue2-vue中mixin到底是什么?_第11张图片
同名的props、methods、inject、computed会被后来者代替

合并型:有data
vue2-vue中mixin到底是什么?_第12张图片
vue2-vue中mixin到底是什么?_第13张图片
mergeData函数遍历了要合并的data的所有属性,然后根据不同情况进行合并。
当目标data对象不包含当前属性时,调用set方法进行合并(set方法其实就是一些合并并重新赋值的方法)
当目标data对象包含当前属性并且当前值为纯对象时,递归合并当前对象值,这样做是为了防止对象存在新增属性。

队列型:合并的有全部生命周期和watch
vue2-vue中mixin到底是什么?_第14张图片
vue2-vue中mixin到底是什么?_第15张图片vue2-vue中mixin到底是什么?_第16张图片
vue2-vue中mixin到底是什么?_第17张图片
生命周期钩子和watch被合并为一个数组,然后正序遍历一次执行。

叠加型:可以合并component、directives,filters
vue2-vue中mixin到底是什么?_第18张图片
叠加型主要是通过原型链进行层层的叠加。

小结:
替换策略有props、methods、inject、computed,就是将新的同名参数替代旧的参数
合并型策略是data,通过set方法进行合并和重新赋值。
队列型策略有生命周期和watch,原理是将函数存入一个数组,然后正序遍历依次执行。
叠加型有component、directives、filters,通过原型链层层叠加。

你可能感兴趣的:(vue.js,javascript,前端)