摘要：前言你知道，用法嗎你知道他們的區別嗎你知道他們的執行順序嘛下面都能找到這些答案使用構造器創建一個子類參數是包含組件選項的對象是全局的創建構造器實例傳入的數據為對應的標簽最外層必須只有一個標簽這是擴展的數據創建實例，并掛載到一個元素上。

你知道extend,mixins,extends，components,install用法嗎?
 你知道他們的區別嗎?
你知道他們的執行順序嘛? 
下面都能找到這些答案.

1.使用vue構造器,創建一個子類,參數是包含組件選項的對象;
2.是全局的

// 創建構造器
var Profile = Vue.extend({
  template: "
{{extendData}}
實例傳入的數據為:{{propsExtend}}
",//template對應的標簽最外層必須只有一個標簽
  data: function () {
    return {
      extendData: "這是extend擴展的數據",
    }
  },
  props:["propsExtend"]
})
// 創建 Profile 實例，并掛載到一個元素上。可以通過propsData傳參.
new Profile({propsData:{propsExtend:"我是實例傳入的數據"}}).$mount("#app-extend")

結論:
Vue.extend實際是創建一個構造器,對應的初始化構造器,并將其掛載到標簽上

github源碼,請戳這里 ,歡迎star

1.將通過 Vue.extend 生成的擴展實例構造器注冊（命名）為一個全局組件,參數可以是Vue.extend()擴展的實例,也可以是一個對象(會自動調用extend方法)
2.兩個參數,一個組件名,一個extend構造器或者對象

//1.創建組件構造器
  var obj = {
    props: [],
    template: "
{{extendData}}
",//最外層只能有一個大盒子,這個和對應規則一致
    data: function () {
      return {
        extendData: "這是Vue.component傳入Vue.extend注冊的組件",
      }
    },
  };

  var Profile = Vue.extend(obj);

  //2.注冊組件方法一:傳入Vue.extend擴展過得構造器
  Vue.component("component-one", Profile)

  //2.注冊組件方法二:直接傳入
  Vue.component("component-two", obj)

  //3.掛載
  new Vue({
    el: "#app"
  });

  //獲取注冊的組件 (始終返回構造器)
  var oneComponent=Vue.component("component-one");
  console.log(oneComponent===Profile)//true,返回的Profile構造器

值可以是一個混合對象數組,混合實例可以包含選項,將在extend將相同的選項合并
mixins代碼:

    var mixin={
    data:{mixinData:"我是mixin的data"},
    created:function(){
      console.log("這是mixin的created");
    },
    methods:{
      getSum:function(){
        console.log("這是mixin的getSum里面的方法");
      }
    }
  }

  var mixinTwo={
    data:{mixinData:"我是mixinTwo的data"},
    created:function(){
      console.log("這是mixinTwo的created");
    },
    methods:{
      getSum:function(){
        console.log("這是mixinTwo的getSum里面的方法");
      }
    }
  } 

  var vm=new Vue({
    el:"#app",
    data:{mixinData:"我是vue實例的data"},
    created:function(){
      console.log("這是vue實例的created");
    },
    methods:{
      getSum:function(){
        console.log("這是vue實例里面getSum的方法");
      }
    },
    mixins:[mixin,mixinTwo]
  })
  
  //打印結果為:
  這是mixin的created
  這是mixinTwo的created
  這是vue實例的created
  這是vue實例里面getSum的方法

結論:
1.mixins執行的順序為mixins>mixinTwo>created(vue實例的生命周期鉤子);
2.選項中數據屬性如data,methods,后面執行的回覆蓋前面的,而生命周期鉤子都會執行

extends用法和mixins很相似,只不過接收的參數是簡單的選項對象或構造函數,所以extends只能單次擴展一個組件

var extend={
    data:{extendData:"我是extend的data"},
    created:function(){
      console.log("這是extend的created");
    },
    methods:{
      getSum:function(){
        console.log("這是extend的getSum里面的方法");
      }
    }
  }

  var mixin={
    data:{mixinData:"我是mixin的data"},
    created:function(){
      console.log("這是mixin的created");
    },
    methods:{
      getSum:function(){
        console.log("這是mixin的getSum里面的方法");
      }
    }
  }
  
    
  var vm=new Vue({
    el:"#app",
    data:{mixinData:"我是vue實例的data"},
    created:function(){
      console.log("這是vue實例的created");
    },
    methods:{
      getSum:function(){
        console.log("這是vue實例里面getSum的方法");
      }
    },
    mixins:[mixin],
    extends:extend
  })
  
  //打印結果
  這是extend的created
  這是mixin的created
  這是vue實例的created
  這是vue實例的getSum里面的方法

結論:
1.extends執行順序為:extends>mixins>mixinTwo>created
2.定義的屬性覆蓋規則和mixins一致

注冊一個局部組件

//1.創建組件構造器
  var obj = {
    props: [],
    template: "
{{extendData}}
",//最外層只能有一個大盒子,這個和對應規則一致
    data: function () {
      return {
        extendData: "這是component局部注冊的組件",
      }
    },
  };

  var Profile = Vue.extend(obj);
  
  //3.掛載
  new Vue({
    el: "#app",
    components:{
      "component-one":Profile,
      "component-two":obj
    }
  });

1.是開發vue的插件,這個方法的第一個參數是 Vue 構造器，第二個參數是一個可選的選項對象(可選)
2.vue.use方法可以調用install方法,會自動阻止多次注冊相同插件

 var MyPlugin = {};
  MyPlugin.install = function (Vue, options) {
    // 2. 添加全局資源,第二個參數傳一個值默認是update對應的值
    Vue.directive("click", {
      bind(el, binding, vnode, oldVnode) {
        //做綁定的準備工作,添加時間監聽
        console.log("指令my-directive的bind執行啦");
      },
      inserted: function(el){
      //獲取綁定的元素
      console.log("指令my-directive的inserted執行啦");
      },
      update: function(){
      //根據獲得的新值執行對應的更新
      //對于初始值也會調用一次
      console.log("指令my-directive的update執行啦");
      },
      componentUpdated: function(){
      console.log("指令my-directive的componentUpdated執行啦");
      },
      unbind: function(){
      //做清理操作
      //比如移除bind時綁定的事件監聽器
      console.log("指令my-directive的unbind執行啦");
      }
    })

    // 3. 注入組件
    Vue.mixin({
      created: function () {
        console.log("注入組件的created被調用啦");
        console.log("options的值為",options)
      }
    })

    // 4. 添加實例方法
    Vue.prototype.$myMethod = function (methodOptions) {
      console.log("實例方法myMethod被調用啦");
    }
  }

  //調用MyPlugin
  Vue.use(MyPlugin,{someOption: true })

  //3.掛載
  new Vue({
    el: "#app"
  });
  

Vue.extend和Vue.component是為了創建構造器和組件;
 mixins和extends是為了拓展組件;
install是開發插件; 總的順序關系: Vue.extend>Vue.component>extends>mixins

github源碼,請戳這里,歡迎star