vue中extend，mixins，extends，components,install的幾個操做

前言

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

1.Vue.extend

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

// 建立構造器
var Profile = Vue.extend({
  template: '<p>{{extendData}}</br>實例傳入的數據爲:{{propsExtend}}</p>',//template對應的標籤最外層必須只有一個標籤
  data: function () {
    return {
      extendData: '這是extend擴展的數據',
    }
  },
  props:['propsExtend']
})
// 建立 Profile 實例，並掛載到一個元素上。能夠經過propsData傳參.
new Profile({propsData:{propsExtend:'我是實例傳入的數據'}}).$mount('#app-extend')
複製代碼

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

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

2.Vue.component

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

//1.建立組件構造器
  var obj = {
    props: [],
    template: '<div><p>{{extendData}}</p></div>',//最外層只能有一個大盒子,這個和<tempalte>對應規則一致
    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構造器
複製代碼

3.mixins

值能夠是一個混合對象數組,混合實例能夠包含選項,將在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,後面執行的回覆蓋前面的,而生命週期鉤子都會執行

3.extends

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一致

4.components

註冊一個局部組件

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

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

5.install

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'
  });
複製代碼

6.各個方法之間的關係

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

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