mixin是啥

类似于OC中的分类,可以扩展一个类的原有功能,在全局注册的mixin则会影响所有其他的类,类似于oc中给NSObject添加了分类功能 eg.

var myMixin= {
    created(){
        this.sayHi()
    },
    methods:{
        sayHi() {
            console.log('hi');
        }
    }
}

var app = new Vue({
    el:"#app",
    render: h=>h(App),
    mixins: [myMixin]
})
//输出:hi

如果自定义的mixin中存在属性和使用该mixin的实例有重合,则组件的属性会覆盖mixin的属性,组件的属性具有更高的优先级

var myMixin= {
    created(){
        this.sayHi()
        console.log(this.foo);
    },
    methods:{
        sayHi() {
            console.log('hi');
        }
    },
    data(){
        return {
            foo: 'mixin foo'
        }
    }
}

var app = new Vue({
    el:"#app",
    render: h=>h(App),
    mixins: [myMixin],
    data:{
        foo:'组件的foo'
    }
})
//输出:组件的foo

如果mixin中具有和组件中相同的方法,则调用的时候调用的是组件中的方法,同样的,组件中的方法优先级更高

var myMixin= {
    created(){
        this.sayHi()
        console.log(this.foo);
    },
    methods:{
        sayHi() {
            console.log(' mixin hi');
        }
    },
    data(){
        return {
            foo: 'mixin foo'
        }
    }
}

var app = new Vue({
    el:"#app",
    render: h=>h(App),
    mixins: [myMixin],
    data:{
        foo:'组件的foo'
    },
    methods:{
        sayHi(){
            console.log('组件 hi');
        }
    }
})
//输出:组件 hi

如果mixin和组件中具有相同的钩子函数,则两个钩子函数都会执行,会整合为一个钩子数组,优先执行mixin的钩子

var myMixin= {
    created(){
        this.sayHi()
        console.log(this.foo);
        console.log('mixin created');
    },
    methods:{
        sayHi() {
            console.log(' mixin hi');
        }
    },
    data(){
        return {
            foo: 'mixin foo'
        }
    }
}

var app = new Vue({
    el:"#app",
    render: h=>h(App),
    mixins: [myMixin],
    data:{
        foo:'组件的foo'
    },
    methods:{
        sayHi(){
            console.log('组件 hi');
        }
    },
    created(){
        console.log('组件created');
    }
})
//mixin created
//组件created

通过上面的示例,可以看出,js中的mixin和oc中的分类还是有很大区别的.mixin可以定义一些功能,方便的注入给一些需要用到的实例中,有助于提高代码复用.

全局注册的mixin会影响到所有的实例,因而要慎重使用

Index.js

Vue.mixin({
    created(){
        console.log('来了老弟');
    }
})

var app = new Vue({
    el:"#app",
    render: h=>h(App),
    created(){
        console.log('组件1 created');
    }
})

app.vue

    export default{
        data(){
            return {
                msg:'你好啊!'
            }
        },
        created(){
            console.log('app created');
        }
    }

输出

来了老弟
组件1 created
来了老弟
app created

总共有两处初始化Vue实例,首先是index.js,会先调用一下mixin的created,然后是app组件里也有一个vue实例,也会先调用一下mixin的.在所有初始化vue实例前面都会调用一下mixin中的,然后调用组件自身的.