vue中mixins(混入)是干什么的?

1.mixins是什么

混入 (mixins) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

2.作用 

主要作用是继承和封装，将一些公共的代码抽离，可以减少代码量，提高复用性。

3.使用

以一段代码为例，完整的展示其使用方法：

// minix.js
export default {
    data () {
        return {
            name: 'minix',
            minixName: 'minixObj',
            flag: false
        }
    },
    mounted() {
        console.log('minixMounted');
    },
    methods: {
        speak() {
            console.log('this is minix');
        },
        getData() {
            return '100';
        }
    }
}
 
// todo.vue
import myMinix from './minix';
 
export default {
    data () {
        return {
            name: 'todo',
            lists: [1, 2, 3, 4]
        }
    },
    mounted() {
        console.log('todoMounted');
    },
    minixs: [myMinix], // todo.vue 中声明minix 进行混合
    methods: {
        speak () {
            console.log('this is todo');
        },
        submit() {
            console.log('submit');
        },
    }
}
 
 
//==========
 
// 最终得到的结果
 
//==========
 
export default {
    data () {
        return {
            name: 'todo', // 共同有的data， 最后保留自己的data
            lists: [1, 2, 3, 4], // 自己独有的，保留
            minixName: 'minixObj', // todo没有的，会被添加进来
            flag: false // todo没有的，会被添加进来
        }
    },
    mounted() {
        // 在钩子函数中的， 会被合并到todo.vue 的钩子函数中， minix中的代码在前，自己的在后
        console.log('minixMounted');
        console.log('todoMounted');
    },
    methods: {
        // 同时有的方法， 会被封装为一个数组， 先执行minix中的，后执行todo自己的
        speak () {
            [
                function() {
                    console.log('this is minix');
                },
                function() {
                    console.log('this is todo');
                }
            ].forEach(item => {
                item();
            })
        },
        // 自己独有的，保留
        submit() {
            console.log('submit');
        },
        // 自己没有的方法会被添加进来
        getData() {
            return '100';
        }
    }
}