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

大漠火狼發表於2018-07-12
Vue

前言

你知道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

相關文章