vue里extend、mixins、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