vue中的mixin的混入规则

当组件和混入对象有同名选项时，这些选项会以恰当的方式合并

1. 数据 data
   数据对象在混入时，会进行合并，发生冲突是，保留组件的数据

2. 值为对象 methods computed等
   在混入时，同名的methods会合并成为一个对象
   如果对象的键名发生冲突，则保留组件对象的键值对

3. 生命周期钩子函数
   同名的钩子函数会被合并为一个数组，依次都会被调用，但是混入对象的钩子函数先被调用

代码：

html代码：
<div id="app">
       {{num}} //99  如果实例中没有num就用混入中的num
       <my-div></my-div>
</div> 

js代码:

   var mixin={
        data(){
            return {
                num:10
            }
        },
        created(){
            alert("mixin--alert"); //alert两次 因为混入了两次
        }
    }
    new Vue({
        el:'#app',
        data:{
            num:99
        },
        methods:{},
        mixins:[mixin],
        components:{
            'my-div':{
                data(){
                    return {
                        num:100
                    }
                },
                mixins:[mixin],
                methods:{},
                template:`
                    <div>
                        <p>{{num}}</p>    //100 如果组件中没有num 就用混入的num=10
                    </div>
                `
            }
        }
    });
}