Vue mixin原理分析

Vue在创建组件实例化之前，会将全局选项和组件选项合并起来，比如全局component, filter, directive, mixin。也就是说我们全局注册的选项会被引入到每个组件中，这样全局选项和组件选项就可以合并起来，之后在组件中就可以访问到全局选项。比如全局过滤器等。

为了保证全局选项不被污染，但是又不可能每个组件都深度克隆一遍，这样会导致全局选项的开销过大。

如何合并mixin

组件合并组件选项和全局选项的优先级

1. 组件选项
2. 组件mixin
3. 组件mixin的mixin
4. 组件mixin的…的mixin
5. 全局选项

组件选项合并的流程

1. 函数合并叠加， 比如data和provide, 如何各个选项中存在重复，那么优先级较高的会覆盖优先级较低的。

var mixins = {
    data() {
        return {name: 123};
    }
};
const vm = new Vue({
    mixins,
    data() {
        // 此时456的优先级会高于mixin中的123
        return {name: 456};
    }
});

2. 数组叠加, 比如生命周期函数

全局mixin created
组件mixin-mixin created
组件mixin created
组件options created

对于生命周期，是优先级较小的先执行。

3. watch 合并成一个数组

全局mixin watch
组件mixin-mixin watch
组件mixin watch
组件options watch

对于watch，是优先级较小的先执行

4. 原型叠加，比如components, filters, directives

两个对象合并的时候，不会相互叠加，而是权重小的被放到权重大的原型上，这样权重大的访问快些，因为作用域链断了

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

5. 覆盖叠加，比如props, methods, computed, inject
   两个对象合并，如果有重复key, 权重大的覆盖权重小的，比如

组件props: { name: 123 };
组件mixin的props: { name: 456 };

那组件的name会替换mixin中的name

6. 直接替换，比如el, template, propData
   这些属性只允许存在一个，所以权重大的会替换掉权重小的

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