Vue中mixins、extends、extend和components的作用和区别

关于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) // 实例化一个组件 -- one

Vue.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是为了扩展组件