vue中的混入 mixin

什么是mixins？

官方解释：混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

mixins可以理解成常见函数封装，想像一下封装JS方法。一个方法你想到处使用，是不是可以提个文件出来封装个函数。 但也不一定只干这个事，也可以进行一些业务逻辑的拆分、组合。不过这个还是风险比较大(命名冲突的问题)的。

混入方式

组件按需混入、

// 定义一个混入对象.js
var myMixin = {
    created: function () {
        this.hello()
    },
    methods: {
        hello: function () {
            console.log('hello from mixin!')
        }
    }
}

// 定义一个使用混入对象的组件
var Component = Vue.extend({
    mixins: [myMixin]
})

全局混入 

全局混入
import Router from 'vue-router' ；
Vue.use(Router)
谨慎使用，它会影响Vue 实例 (包括第三方组件)。

总结：

选项合并

1、混入的 data 中，键名相同，则读取组件中的 键名；反之读取混入键名；

2、钩子：同名钩子函数将混合为一个数组，因此都将被调用。混入对象的钩子将在组件自身钩子之前调用。

3、值为对象的混入：如methods,components等，选项会被合并，组件对象覆盖混入对象。