mixin机制 vue_Vue的mixin机制及mergeOptions解析

前言

Mixin 也就是混入的意思，就是说通过某种方式将一个对象的一些属性，混入到目标对象身上。对于我个人来说，其实并不太喜欢 Mixin 这是方式的，因为它对开发者来说是透明的，我们不知道什么时候同事去绑定了一个全局的 Mixin，当然用的好那肯定是不方便的，也无奈 Vue 的 Mixin 机制那么强大，所以就驱使我来深入了解它。

start

mixin 方法在src/core/global-api下的mixin.js文件中，打包文件我们可以看到以下代码：

export function initMixin(Vue: GlobalAPI) {

Vue.mixin = function (mixin: Object) {

this.options = mergeOptions(this.options, mixin)

return this

}

}

Vue.mixin方法也非常的简练，内部也是直接调用了 mergeOptions 方法，从方法名字上可以看出合并Options就大概知道是什么意思了。我们来看一下 mergeOptions 方法是怎么实现的，先贴一下代码。

export function mergeOptions(

parent: Object,

child: Object,

vm?: Component

): Object {

if (process.env.NODE_ENV !== 'production') {

checkComponents(child)

}

if (typeof child === 'function') {

child = child.options

}

// 规范化

normalizeProps(child, vm)

normalizeInject(child, vm)

normalizeDirectives(child)

if (!child._base) {

if (child.extends) {

parent = mergeOptions(parent, child.extends, vm)

}

if (child.mixins) {

for (let i = 0, l = child.mixins.length; i < l; i++) {

parent = mergeOptions(parent, child.mixins[i], vm)

}

}

}

const options = {}

let key

for (key in parent) {

mergeField(key)

}

for (key in child) {

if (!hasOwn(parent, key)) {

mergeField(key)

}

}

function mergeField(key) {

const strat = strats[key] || defaultStrat

options[key] = strat(parent[key], child[key], vm, key)

}

return options

}

首先我们看到 mergeOptions 函数传过来的前两个参数为parent和child，通过 mixin 里面的调用，我们可以知道要把child上的属性 merge 到parent上

if (process.env.NODE_ENV !== 'production') {

checkComponents(child)

}

首先在开发环境的时候会先检查一下 child 中的 components 属性，我们都知道这里是组件装载的地方，这里要检测一下命名是否正确。

child 也可以是一个方法，如果是一个方法，那么就可以认为这是一个组件，重新赋值 child 为 child.options，下面是源码。

if (typeof child === 'function') {

child = child.options

}

接下来这段代码用于规范化 Props、Inject 已经 Directives。

normalizeProps(child, vm)

normalizeInject(child, vm)

normalizeDirectives(child)

我们都知道这三个东西在开发过程中有多种形式存在，就拿最常用的 Props 来说，props 可以是对象也可以是数组，例如：

//数组方式

props: ['type','data', 'info']

// 对象的方式

props: {

type: {

type: String,

default: ''

},

data: {

type: Array,

default: () =>[]

},

info: {

type: Object,

default: () => ({})

}

}

可见 Vue 提供了 props 的两种写法，便于我们在开发过程中写代码，但是在 Vue 内部必然要使用一种统一的方式去处理，要不然太浪费精力去处理另外一种情况，也让代码不具有可扩展性，所以就出现对这个多方式的配置有了规范化的处理。

就拿 props 的规范化来说吧

function normalizeProps(options: Object, vm: ?Component) {

const props = options.props

if (!props) return

const res = {}

let i, val, name

if (Array.isArray(props)) {

i = props.length

while (i--) {

val = props[i]

if (typeof val === 'string') {

name = camelize(val)

res[name] = { type: null }

} else if (process.env.NODE_ENV !== 'production') {

warn('props must be strings when using array syntax.')

}

}

} else if (isPlainObject(props)) {

for (const key in props) {

val = props[key]

name = camelize(key)

res[name] = isPlainObject(val) ? val : { type: val }

}

} else if (process.env.NODE_ENV !== 'production') {

warn(

`Invalid value for option "props": expected an Array or an Object,` +

`but got${toRawType(props)}.`,

vm

)

}

options.props = res

}

这里把 props 规范化都转化成了对象的方式，其它两个也是类似的操作。

接下来的逻辑就是合并了。

if (!child._base) {

if (child.extends) {

parent = mergeOptions(parent, child.extends, vm)

}

if (child.mixins) {

for (let i = 0, l = child.mixins.length; i < l; i++) {

parent = mergeOptions(parent, child.mixins[i], vm)

}

}

}

首先判断 child 是否被合并过，只有合并过之后才有_base这个属性，然后判断 child 是否有 extends 和 mixins 属性，有的话就再次调用 mergeOptions 将它们合并到 parent 上。

最后就是这部分合并逻辑

const options = {}

let key

for (key in parent) {

mergeField(key)

}

for (key in child) {

if (!hasOwn(parent, key)) {

mergeField(key)

}

}

function mergeField(key) {

const strat = strats[key] || defaultStrat

options[key] = strat(parent[key], child[key], vm, key)

}

对于 parent 和 child 都调用了 mergeField 函数用来合并，而 mergeField 中获取了 start 函数，看一下这个是干嘛的。

const defaultStrat = function (parentVal: any, childVal: any): any {

return childVal === undefined ? parentVal : childVal

}

defaultStart 只是一个简单的选取函数，判断如果 childVal 不存在，就返回 parentVal，存在就返回 childVal，结合上面逻辑，你可能会想，child 这不就覆盖 parent 上的属性了吗？

在上面还有这段逻辑

for (key in child) {

if (!hasOwn(parent, key)) {

mergeField(key)

}

}

在遍历 key 的时候如果 child 的 key 在 parent 存在的话就会忽略。

上面说了defaultStart这个取值函数，对于 start 还有一个判断的逻辑

const strat = strats[key] || defaultStrat

这里做的是它会根据一些特定的 key 来使用一些特定的函数去处理，例如：data，生命周期，特定的component，directive，filter，watch，props，provide，methods，inject，computed`等等

简单看了一下，这些也比较容易理解，先分析这么多。

end

本来想看 Vue 的 Mixin 的原理，实则是看的 mergeOptions 的原理，结果一发不可收拾。starts 这个东西还是做的蛮全面的，把特殊的属性都使用特定的方法来处理，受益无穷。