前言你知道extend、mixins、extends、components、install的用法吗？你知道他们的区别吗？你知道他们的执行顺序吗？您可以在下面找到这些答案。1.Vue.extend1。使用vue构造函数创建一个Subclass，参数是一个包含组件选项的对象；2.是全局的//创建构造函数varProfile=Vue.extend({template:'
{{extendData}}实例传入的数据为：{{propsExtend}}
',//模板对应的最外层标签必须只有一个标签data:function(){return{extendData:'Thisistheextendeddata',}},props:['propsExtend']})//创建Profile实例并将其附加到元素。可以通过propsData.newProfile({propsData:{propsExtend:'我是实例传入的数据'}}).$mount('#app-extend')结论：Vue.extend其实是创建了一个构造函数，对应的初始化构造函数，并挂载在标签github源码上，戳这里，欢迎star2.Vue.component1。将Vue.extend生成的扩展实例构造器注册（命名）为全局组件，参数可以是Vue.extend()扩展的实例，也可以是对象（会自动调用extend方法）2.两个参数，一个组件名，一个扩展构造函数或对象//1.创建组件构造器varobj={props:[],template:'
',//最外层只能有一个大盒子，与
data对应的规则一致：function(){return{extendData:'这是Vue.component注册的组件传递给Vue.extend',}},};变种配置文件=Vue.扩展（对象）；//2。注册组件方法一：传入Vue.extend扩展构造函数Vue.component('component-one',Profile)//2.注册组件方式二：直接传入Vue.component('component-two',obj)//3.挂载新Vue({el:'#app'});//获取注册的组件（总是返回构造函数）varoneComponent=Vue.component('component-one');console.log(oneComponent===Profile)//true，返回的Profile构造函数3.mixins值可以是混合对象数组，混合实例可以包含options，相同的options会被扩展Mergemixins代码：varmixin={data:{mixinData:'我是mixin的数据'},created:function(){console.log('这是mixin的创建');},methods:{getSum:function(){console.log('这是mixin的getSum中的方法');}}}varmixinTwo={data:{mixinData:'我是mixinTwo的数据'},created:function(){console.log('这是mixinTwo的创建');},methods:{getSum:function(){console.log('这是mixinTwo的getSum中的方法');}}}varvm=newVue({el:'#app',data:{mixinData:'我是vue实例的数据'},created:function(){console.log('这是创建的vue实例');},方法:{getSum:function(){console.log('这是vue实例中的getSum方法');}},mixins:[mixin,mixinTwo]})//打印结果为：ThisiscreatedofmixinThisiscreatedofmixinTwoThisiscreatedofthevueinstance.这是vue实例中getSum的方法。结论：1、mixins的执行顺序是mixins>mixinTwo>created（vue实例的生命周期钩子）；2.options中的数据属性，比如data和methods，都是在后面执行的3.extendsextends的用法和mixin很相似，只不过接收的参数是简单的option对象或者构造函数，所以extends一次只能扩展一个组件timevarextend={data:{extendData:'我是extend的数据'},created:function(){console.log('这是extend的创建');},methods:{getSum:function(){console.log('这是扩展getSum里面的方法');}}}varmixin={data:{mixinData:'我是mixin的数据'},created:function(){console.log('这是mixin的创建');},methods:{getSum:function(){console.log('这是mixin的getSum中的方法');}}}varvm=newVue({el:'#app',data:{mixinData:'我是vue实例的数据'},created:function(){console.log('这是创建的vue实例');},方法:{getSum:函数n(){console.log('这是vue实例中的getSum方法');}},mixins:[mixin],extends:extend})//打印结果ThisisthecreatedofextendThisisthecreatedofmixinThisisthecreatedofthevueinstanceisthecreatedinthemethodinthegetSumofthevueinstance.结论：1.extends的执行顺序是：extends>mixins>mixinTwo>created2。定义的属性覆盖规则与mixins4一致。components注册一个本地组件//1.createComponentconstructorvarobj={props:[],template:'',//最外层只能有一个大盒子，这个和对应相同规则的data:function(){return{extendData:'Thisisacomponentregisteredlocallybycomponent',}},};varProfile=Vue.extend(obj);//3。MountnewVue({el:'#app',components:{'component-one':Profile,'component-two':obj}});5.安装1。是开发vue的插件，该方法第一个参数为vue结构体第二个参数为可选option对象（可选）2.vue.use方法可以调用install方法，会自动防止多次注册同一个插件varMyPlugin={};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的插入命令');},update:function(){//根据获取到的新值执行相应的update//为初始值，console.log('执行指令my-directive的update');},componentUpdated:function(){console.log('命令my-directive的componentUpdated已被执行');},unbind:function(){//做清理操作//比如移除绑定的事件监听器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已被调用');}}//调用MyPluginVue.use(MyPlugin,{someOption:true})//3.挂载新Vue({el:'#app'});6.Vue.extend和Vue.extend的关系component是创建构造函数和组件；mixins和extends是扩展组件；install是开发插件；整体顺序关系：Vue.extend>Vue.component>extends>mixinsgithub源码请戳这里，欢迎star
