vue中 extend、mixins和extends的区别

介绍：

extend：扩展组件的构造器，当我们调用vue.component('a', {...})时自动调用

mixins：接收对象数组（可理解为多继承），可以混入多个mixin，

extends：接收的是对象或函数（可理解为单继承），extends只能继承一个

1.extend

Vue.extend使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

// Vue.extend
// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

2.mixins

mixins 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项，他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。

举例：如果你的混入包含一个钩子而创建组件本身也有一个，两个函数将被调用。
Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。

// mixins示例
var mixin = {
  created: function () { console.log(1) }
}
var vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})
// => 1
// => 2

mixins要点

• data混入组件数据优先
• 钩子函数将混合为一个数组，混入对象的钩子将在组件自身钩子之前调用
• 值为对象的选项，例如 methods, components 和 directives，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。
• 以上合并策略可以通过Vue.config.optionMergeStrategies修改

3.extends

允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数)，而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。这和 mixins 类似。

// extends示例
var CompA = { ... }

// 在没有调用 `Vue.extend` 时候继承 CompA
var CompB = {
  extends: CompA,
  ...
}

4.总结：

• extend用于创建vue实例
• mixins可以混入多个mixin，extends只能继承一个
• mixins类似于面向切面的编程（AOP），extends类似于面向对象的编程
• 优先级Vue.extend>extends>mixins