前言

mixin一般用来提取组件的公用代码部分，利用的好，还能优化业务代码结构，使得原本冗长的页面，能够简化不少

提炼页面的相关逻辑和数据

即使我们的index.vue已经是提取了几个子组件出来，页面代码和逻辑还是很混乱，data和methods里还是有很多跟主体非必要的数据和逻辑

优化前

    <template>
        <h1>{{title}}</h1> <!--页面主体内容-->
        <Child :data="list"></Child> <!--引用的子组件-->
        <ul @click="clickAction"> <!--拆分不成组件的业务逻辑-->
            <li v-for="item in items">{{item}}</li>
        </ul>
    </template>

    new Vue({
        data: function () {
            return {
                title: '',
                list: [],
                items : []
            }
        },
        methods : {
            getTitle : function(){}, //获取数据和处理数据逻辑省略...
            getList : function(){},
            getItems : function(){},
            clickAction : function(){}
        },
        created: function () {
            this.getTitle();
            this.getList();
            this.getItems();
        }
    })

模板中一般会三种不同类型的代码：页面本身的、引用的子组件、拆分不成子组件的。
实例中data的三个数据，都需要单独从接口中获取数据，然后需要进行一些处理后，才能显示出来，实际页面，data和methods的数据和方法会有十几甚者二十几个那么多，无形中index.vue文件就被拉得好长，明明已经抽取了组件了，还是那么冗长。

可以利用mixin，将页面中一些相关联的属性和方法抽离出来，优化结构，避免属性和方法混乱查不到来源，mixin的属性和方法，可以带点特殊前缀，比如_list这样

优化后

模板基本没什么变化，只是变量名改变了下

    <template>
        <h1>{{title}}</h1> <!--页面主体内容-->
        <Child :data="_list"></Child> <!--引用的子组件-->
        <ul @click="_clickAction"> <!--拆分不成组件的业务逻辑-->
            <li v-for="item in _items">{{item}}</li>
        </ul>
    </template>

Child这个子组件相关data和methods抽离成一个child.mixin.js

    let mixin = {
        data : function(){
            return {
                _list : []
            }
        },
        methods: {
            _getList: function () {
                this._list = [1,2,3];
            },
        }
    }
    export default mixin;

拆分不了的逻辑相关，抽离成items.mixin.js

    let mixin = {
        data : function(){
            return {
                _items : []
            }
        },
        methods: {
            _getItems: function () {
                this.items = [4,5,6];
            },
            _clickAction : function(){
                alert(1);
            }
        }
    }
    export default mixin;

最后就是主体的代码，引用上面的mixin文件

    import childMixin from "./child.mixin"
    import itemsMixin from "./items.mixin"

    new Vue({
        mixins : [childMixin,itemsMixin]
        data: function () {
            return {
                title: ''
            }
        },
        methods : {
            getTitle : function(){}
        },
        created: function () {
            this.getTitle();
            this._getList();
            this._getItems();
        }
    })

这样的话，template中的代码是没什么变化，下面的业务js代码中，多了引用mixins，会将抽离出去的代码，合并进来，所以主体的data没有_list和_items，依然能使用；在created中也能直接调用mixin混入的函数，基本只是需要调用入口文件，业务实现则不需要再次关心如何实现，能够一定程度上简化代码结构。

这只是一个简单的demo，实际操作中会比这复杂，要注意变量命令和抽离的合理性，才能达到优化的结果

利用Vue2的mixin优化代码结构

前言

提炼页面的相关逻辑和数据

优化前

优化后