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