关于vue的最佳实践（五）—提高代码复用性-Mixins

对于 mixins 在vue中的复用，可能对部分项目不是很常用，但当项目比较大型时，复用代码除了可以帮我们节约时间，减少冗余代码，更能帮助我们对项目进行更好的模块管理。

本地混入

const mixin = {
    data() {
        return {
            message: 'hello'
        }
    },
    methods:{
        foo () {
            console.log('foo');
        }
    }
}

new Vue({
    mixins: [mixin],
    data() {
        return {
            title: 'def',
            message: 'goodbye'
        }
    },
    methods:{
        bar () {
            console.log('bar');
        },
    }
})

注意：

1. 当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。比如，数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先。
2. 同名钩子函数将混合为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
3. 值为对象的选项，例如 methods, components 和 directives，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。

全局混入

mixins 一样是支持全局使用的，但是一旦使用全局混入对象，将会影响到所有之后创建的 Vue 实例，所以应当谨慎使用。

Vue.mixin({
    created () {
        let message = this.$options.message;
        if (message) {
            console.log(message);
        }
    }
})

混入的拆分

在复用代码过程中，必定会涉及到代码耦合问题，所以当我们使用 mixins 时，应当面向功能的实现来创建混入对象，而非面向页面或者业务。

就像，多个页面有相同两个功能是可实现复用的，面对这种情况，我们应将其分成两个混入对象，而不是将两个功能放入同一个混入对象中，除非功能间有耦合不可拆分的地方。

其原因在于，当我们某一页面有可能不再需要使用某一功能时，可以直接移除混合对象，避免耦合导致所有页面都都需要更改。