VUE之mixin混入机制

mixin混入

提供了一种非常灵活的方式，来分发vue组件中的可复用功能，一个混入对象可以包含任意组件选项，当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
mixin混入说简单点就是合并，有点类似Object的assign方法，其不同之处是他的混入目标对象必须是vue实例对象（Vue组件），被合并的源对象（混入对象）是一个拥有vue option APi的普通对象

//源对象  混入对象
var myMixin={
    created：function(){
        this.hello()
    },
    methods:{
        hello:function(){
            console.log('hello from mixin!')
        }
    }
}
//定义一个使用混入对象的组件
var Component = Vue.extend({   
    mixins:[myMinx]
})
var component = new Component()

混入对象和组件合并时的合并规则：

1. 数据data：以组件数据优先，具有相同字段时，组件字段覆盖混入对象字段
2. 钩子函数：同名钩子函数会被合并为一个数组，都将被调用，混入对象的钩子先执行
3. 值为对象的选项：如method、components、directives等，将被合并为同一个对象。合并前两个对象中的键名冲突时（例如二者method中都有getId()方法时），与data中合并方式相同，组件覆盖混入对象，只保留组件本就存在的

Vue.extend()也使用同样的策略进行合并

var myMixin = { //定义混入对象
    data(){
        retrun{
            a:1,
            b:2,
            c:3
        }
    },
    created(){
        console.log('混入对象的钩子函数')
    },
    method:{
       hello(){
           console.log('混入对象的对象的键值对：hello：function')
       }
    }
}

new Vue({
    mixin:[myMixin],
    data(){
        a:'a',
        b:'b'
    },
    created(){
        console.log('组件的钩子函数')
        this.hello()
    },
    method:{
        hello(){
            console.log('组件对象的对象的键值对：hello：function')
            console.log(this.a,this.b,this.c)
        }
    }
})
/**********************************************************************************
vue组件创建的运行结果为(控制台打印的值)):
    混入对象的钩子函数
    组件的钩子函数
    组件对象的对象的键值对：hello：function
    a,b,3
*/