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是為了擴展組件