【Vue原理】Mixin - 白话版

写文章不容易，点个赞呗兄弟 专一 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工做原理，源码版助于了解内部详情，让咱们一块儿学习吧 研究基于 Vue版本 【2.5.17】

若是你以为排版难看，请点击 下面连接 或者 拉到 下面关注公众号也能够吧

【Vue原理】Mixin - 白话版

今天咱们用白话文解读 mixin 的工做原理，轻松快速理解 mixin 内部工做原理。你说，你只懂怎么用的，却不懂他内部是怎么工做的，这样也不太行。

而我以为如今出一个 白话版，是让你们有兴趣去研究源码的时候，能够提早理清一下思路。暂时没时间了解源码的，也能够先了解下内部流程，对解决一些奇奇怪怪的问题也是颇有做用的

mixins 我以为可能你们不多用把，可是这个东西真的很是有用。至关于封装，提取公共部分。

显然，今天我不是来教你们怎么用的，怎么用看文档就行了，我是讲解 生命的真谛 内部的工做原理。若是不懂用的，请去官网看怎么用，兄弟

mixin不难，就是有点绕，今天咱们探索两个问题

一、何时合并

二、怎么合并

<br> <br>

何时合并

什么是全局选项？ 就是 全局组件，全局过滤器，全局指令，全局mixin

一、Vue.component 注册的 【全局组件】 二、Vue.filter 注册的 【全局过滤器】 三、Vue.directive 注册的 【全局指令】 四、Vue.mixin 注册的 【全局mixin】

也就是说，你全局注册的选项，其实会被传递引用到你的每一个组件中，这样，全局选项 和 组件选项 就会合并起来，以后组件便能访问到全局选项，而后你就能够在组件内使用全局注册的选项，好比使用 全局过滤器

其实就是像你在 本身的组件声明 components 同样，只是全局注册的话，Vue 背后偷偷给你的每一个组件 都合并多一个全局选项的引用

可是为了保证全局选项不被污染，又不可能每一个组件都深度克隆一份全局选项致使开销过大，因此会根据不一样的选项，作不一样的处理。下面会详细讲解

<br> <br>

怎么合并

权重

一、组件选项 二、组件 - mixin 三、组件 - mixin - mixin 四、.....省略无数可能存在的嵌套 mixin x、全局 选项

权重 从 1 到最后 依次减小

其实没有权重这个东西，可是结果是同样的，是我以为这样好理解，加上的一个概念

下面的讲解，会使用 四种选项代号 做为例子

mixin 里面嵌套mixin 太深 不多见，并且也 难以维护，因此就只嵌套一层为例

一、组件选项：代号为 A

二、组件-mixin：代号为 B

三、组件-mixin-mixin ：代号为 C

四、全局选项 ：代号为 D

<br> <br>

一、函数合并叠加

包括选项：data，provide

把两个函数合并加到一个新函数中，并返回这个函数。在函数里面，会执行 那两个方法。

按照这个流程，使用代号

一、D 和 C 合并成一个函数 (CD)，函数执行时，会执行 C ，再执行 D

二、(CD) 和 B 合并成 一个函数 (B(CD))，函数执行时，会执行 B ，再执行 (CD)

三、(B(CD)) 和 A 合并成一个函数，函数执行时，会执行 B ，再执行 (B(CD))

有点绕，简化执行流程是： A->B->C->D

data 中数据有重复的，权重大的优先，好比下面

var test_mixins={
    data(){        
        return {name:34}
    }
}

var a=new Vue({    
    mixins:[test_mixins],
    data(){        
        return {name:12}
    }
})

能够看到，mixin 和 组件自己 的 data 都有 name 这个数据，很显然会以组件自己的为主，由于组件自己权重大

<br> <br>

二、数组叠加

生命周期函数

权重越大的越放后面，会合并成一个数组，好比created

[ 
    全局 mixin - created，
    组件 mixin-mixin - created，
    组件 mixin - created，
    组件 options - created 
]

执行流程是

生命周期，权重小的 先执行

watch 合并成一个下面这样的数组，权重越大的越放后面

[ 
    全局 mixin - watch，
    组件 mixin-mixin - watch，
    组件 mixin - watch，
    组件 options - watch 
]

执行流程是

监听回调，权重小的 先执行

<br> <br>

三、原型叠加

包括选项：components，filters，directives

两个对象合并的时候，不会相互覆盖，而是 权重小的 被放到 权重大 的 的原型上

这样权重大的，访问快些，由于做用域链短了

A.__proto__ = B  
B.__proto__ = C  
C.__proto__ = D

两个对象合并的时候，不会

以 filter 为例，下面是四种 filter 合并

// 全局 filter
Vue.filter("global_filter",function (params) {})

// mixin 的 mixin
var mixin_mixin={    
    filters:{
        mixin_mixin_filter(){}
    }
}

// mixin filter
var test_mixins={    
    filters:{
        mixin_filter(){}
    }
}

// 组件 filter
var a=new Vue({    
    mixins:[test_mixins],    
    filters:{
        self_filter(){}
    }
})

结果就系这样..

<br> <br>

四、覆盖叠加

包括选项：props，methods，computed，inject

两个对象合并，若是有重复key，权重大的覆盖权重小的

好比

组件的 props：{ name:""} 组件mixin 的 props：{ name:"", age: "" }

那么 把两个对象合并，有相同属性，以 权重大的为主，组件的 name 会替换 mixin 的name

<br> <br>

五、直接替换

这是默认的处理方式，当选项不属于上面的处理方式的时候，就会像这样处理，包含选项：el，template，propData 等

两个数据只替换，不合并，权重大的，会一直替换 权重小的，由于这些属于只容许存在一个，全部只使用权重大的选项

组件 设置 template，mixin 也设置 template，不用怕，组件的确定优先

这个好像跟 覆盖叠加 很像，其实不同，覆盖叠加会把两个数据合并，重复的才覆盖。而这个不会合并，直接替换掉整个选项