About the operations of extend, mixins, extends, components, and install in vue

This article mainly introduces the operations of extend, mixins, extends, components, and install in vue. It has a certain reference value. Now I share it with everyone. Friends in need can refer to it

Preface

Do you know how to use extend, mixins, extends, components, and install?
Do you know their differences?
Do you know their execution order?
You can find these answers below.

1.Vue.extend

1. Use the vue constructor to create a subclass, and the parameter is an object containing component options;
2. It is global

// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{extendData}}实例传入的数据为:{{propsExtend}}</p>',//template对应的标签最外层必须只有一个标签
  data: function () {
    return {
      extendData: '这是extend扩展的数据',
    }
  },
  props:['propsExtend']
})
// 创建 Profile 实例，并挂载到一个元素上。可以通过propsData传参.
new Profile({propsData:{propsExtend:'我是实例传入的数据'}}).$mount('#app-extend')

Conclusion:
Vue.extend actually creates a constructor, the corresponding initialization constructor, and mounts it on the label

github source code, please click here, welcome to star

2.Vue.component

1. Register (name) the extension instance constructor generated by Vue.extend as a global component, and the parameter can be a Vue.extend() extension An instance, or an object (the extend method will be called automatically)
2. Two parameters, a component name, an extend constructor or object

//1.创建组件构造器
  var obj = {
    props: [],
    template: '<p></p><p>{{extendData}}</p>',//最外层只能有一个大盒子,这个和<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构造器</tempalte>

3.mixins

The value can be an array of mix objects, and the mix instance can contain options. The same options will be merged in extend
mixins code:

    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的方法

Conclusion:
1. The order in which mixins are executed is mixins>mixinTwo> ;created (life cycle hook of vue instance);
2. The data attributes in the options, such as data and methods, will be overwritten by the previous ones, and the life cycle hooks will all be executed.

3.extends

The usage of extends is very similar to mixins, except that the parameters received are simple option objects or constructors, so extends can only extend one component at a time

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里面的方法

Conclusion:
1.extends execution The order is: extends>mixins>mixinTwo>created
2. The defined attribute coverage rules are consistent with mixins

4.components

Register a local component

//1.创建组件构造器
  var obj = {
    props: [],
    template: '<p></p><p>{{extendData}}</p>',//最外层只能有一个大盒子,这个和<tempalte>对应规则一致
    data: function () {
      return {
        extendData: '这是component局部注册的组件',
      }
    },
  };

  var Profile = Vue.extend(obj);
  
  //3.挂载
  new Vue({
    el: '#app',
    components:{
      'component-one':Profile,
      'component-two':obj
    }
  });</tempalte>

5 .install

1. It is a plug-in for developing vue. The first parameter of this method is the Vue constructor, and the second parameter is an optional option object (optional)
2.vue. The use method can call the install method, which will automatically prevent multiple registrations of the same plug-in

 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. The relationship between each method

Vue.extend and Vue.component are used to create constructors and components ;
mixins and extends are for extending components;
install is for developing plug-ins; The general sequence relationship: Vue.extend>Vue.component>extends>mixins

The above is the entire content of this article, I hope It will be helpful for everyone’s learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

For analysis of React components and state|props

For config/index.js in vue :Detailed explanation of configuration

The above is the detailed content of About the operations of extend, mixins, extends, components, and install in vue. For more information, please follow other related articles on the PHP Chinese website!