关于mixins：官方文档： https://cn.vuejs.org/v2/guide/mixins.html
一、components
Vue.component是用来注册或获取全局组件的方法，其作用是通过vue.extend生成的扩展实例构造器注册为一个组件，全局注册的组件可以在所有晚于该组件注册语句构造的vue实例中使用。
// 先注册一个baseOptions
let baseOptions = {
template: `<p>{{ firstName }}{{ lastName }}aka {{ alias }}</p>`,
data: function(){
firstName: 'walter',
lastName: 'beijie',
alias: '贝贝'
},
created() {
console.log('One')
}
}
new Vue(baseOptions) // 实例化一个组件 -- oneVue.component('my-component', vue.extend(baseOptions))
// 传如一个选项对象(自动调用Vue.extend)，等价于以上代码
Vue.component('my-component', baseOptions)
// 获取注册的组件(始终返回构造器)
const MyComponent = Vue.component(baseOptions)
// 当我我们需要在其他页面'扩展'或者叫‘混合’baseOptions时，Vue中提供了多种实现方式: extend\mixins\extends
二、extend
可以扩展Vue构造器，从而用预定义选项创建可复用的组件构造器
let BaseComponent = Vue.extend(baseOptions)
// 基于基础组件BaseComponent，再扩展新逻辑
new BaseComponent({
created() {
console.log('Two')
}
// 其他自定义逻辑
}).$mount('#app') // 可以挂载到一个元素上
// -- One
// -- Two
三、mixins
mixins选项接受一个混入对象的数组，这些混入实例对象可以像正常的实例对象一样包含选项，他们将在Vue.extend（）里最终选择使用相同的选项合并逻辑合并。
mixin钩子按照传入顺序依次调用，并在调用组件自身之前调用。
// mixins示例
var mixin = {
created() { console.log('mixin-created') }
} var vm = new Vue({
created() { console.log('vm-created') } ,
mixins: [mixin]
})// -- mixin-created
// -- vm-created
mixins的要点：
1：data混入组件的数据优先
2：钩子函数将混合为一个数组，混入对象的钩子将在组件钩子之前调用
3：值为对象的，例如methods、components、directives，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对
4：以上合并策略可以通过Vue.config.optionMergeStrategies修改
四、extends
允许声明扩展另一个组件(可以是一个简单的选项对象或者构造函数)，而无需使用vue.extend(),主要是为了便于扩展单文件组件。和mixins类似，区别在于，组件自身的选项会比要扩展的源组件具有更高的优先级，mixins接受的是个数组类型，extends是一个对象
new Vue({
extends: baseOptions,
created() {
console.log('extends-created')
}
})// One
// extends-created
五、总结
vue.extend()只是创建一个构造器，为了创建可复用的组件
mixins,extedns是为了扩展组件
