Vue中的混入(mixin)是一个比较简单的知识点。熟悉CSS预处理语言比如less、sass的开发者对mixin肯定很熟悉。Vue中的mixin几乎跟less等里面的mixin一样，都是将定义好的一些功能原样注入Vue组件当中，也有些类似面向对象编程中的继承(我只是说类似:) )。

mixin是一个对象，这个对象的属性可以是Vue实例或者组件实例的生命周期钩子、属性等，当全局混入或者混入到组件后，Vue实例或者组件实例就拥有了mixin中定义的生命周期钩子、属性等等。如果两者中有重复的，会按照一定的规则合并。

定义一个简单的mixin：

mixin.js：

export default {
    data(){
        return {
            foo: 'bar'
        };
    },
    created(){
        console.log(this.$router);
    }
}

使用这个mixin：

单文件组件里：

<template>...</template>
<script>
    import myMixin from 'mixin.js';

    export default {
        data(){
            return {
                abc: 'xyz'
            }
        },
        mounted(){
            console.log('mounted')
        },
        mixins: [myMixin]
    }
</script>

最后生成的组件将包含mixin和组件本身的所有属性，如果重复，会进行合并。重复的值会采用组件的值，重复的钩子函数都会执行，但mixin中的钩子函数会先执行。具体合并规则请查阅Vue官方文档。

//合并后的结构示意，开发者工具中可以查看到合并后的Vue/组件实例
{
    data(){
        return {
            foo: 'bar',
            abc: 'xyz'
        }
    },
    created(){
        console.log(this.$router);
    },
    mounted(){
        console.log('mounted')
    }
}

标签: Vue混入, Vue mixin