前言

之前一直有听过或者看到过别人Vue代码中使用mixin，所以今天想起来就花点时间简单了解一下使用方法和场景。下次再在实际项目开发中尝试使用。

理论

混入(mixin)用来分发Vue组件中的复用功能，所有对象选项将混入进组件本身。

基本使用

混入对象会和组件数据合并，混入对象的钩子将在组件自身钩子之前调用。但是当有命名冲突时，会以组件数据优先（组件数据覆盖混入对象数据）

// 定义 mixin
var myMixin = {
    data() {
        return {
            msg: 'from mixin',
            a: 1
        };
    },
    mounted() {
        console.log('This is mixin')
    }
};
// 使用
new Vue({
    mixins: [myMixin],
    data() {
       return {
            msg: 'from component',
            b: 2
        }
    },
    mounted() {
        console.log('This is component');
        console.log(this.$data) 
    }
})
// => This is mixin 混入的对象会先调用
// => This is component  组件在后
// => {msg: "from component", a: 1, b: 2}  组件数据优先

钩子函数也是如此，命名冲突时以组件优先，组件方法覆盖混入对象方法

var myMixin = {
    methods: {
        print() {
            console.log('print mixin')
        }
    }
};
new Vue({
    mixins: [myMixin],
    methods: {
        print() {
            console.log('print component')
        }
    },
    mounted() {
        this.print()
    }
})
// => print component

在全局中混入

也可以在全局进行混入操作，不过官方不建议这样做，会影响到每一个Vue实例，具体情况还是看需求吧。

// 记录每个实例创建和销毁
Vue.mixin ({
    created() {
        console.log(`${this.$route.name} is created`)
    },
    destroyed() {
        console.log(`${this.$route.name} is destroyed`)
    }
});
new Vue({
    // 每个Vue实例都会在控制台输出...
})

使用场景

监听键盘事件、窗口事件、滚动处理等，还有做埋点处理，或者说可复用组件方法，都可以使用混入

最后

其实官方文档写的很清晰明了，一看就明白的那种 https://cn.vuejs.org/v2/guide/mixins.html#%E5%9F%BA%E7%A1%80
除了知道基本使用方法和场景，有时间可以看看源码，了解背后的实现。