Vue源代码解释中组件组件注册的实现

时间：2021-08-30 来源：互联网编辑：宝哥软件园浏览：次

什么是组件？

组件是Vue.js最强大的功能之一组件可以扩展HTML元素，封装可重用的代码。在更高的层次上，组件是一个自定义元素，Vue.js的编译器为其添加了特殊的功能。在某些情况下，组件也可以表示为用is特性扩展的本机HTML元素。

所有Vue组件也是Vue的实例，因此它们可以接受相同的选项对象(除了一些根级别的特定选项)并提供相同的生命周期挂钩。

Vue可以通过两种方式注册组件：全局注册和本地注册。

全球注册

注册方法

全球注册有两种方式：

直接通过Vue.component注册

vue.component ('button-counter '，{//data选项必须是函数data : function(){ return { count :0 } }，template3360' # clickbtn'})是通过Vue.extend注册的.

var button component=Vue . extend({ name : ' button-counter '，data : function(){ return { count : 0 } }，template : ' # ClickBtn ' })；Vue.component('button-counter '，button component)；特定过程

初始化Vue时，initGlobalAPI通过调用initAssetRegisters()来注册组件。

创建组件注册///ASSET _ TYPES的函数initassetregists(Vue){//方法在Vue内部定义，var asset _ types=['component '，' directive '，' filter ']；资产类型。foreach(Function(type){ vue[type]=Function(id，definition){//这里的定义是指一个定义(Function或Object)，它是一个函数或对象。//如果定义不存在，直接返回选项对应的类型和id。//这里的选项指的是全局组件、指令和过滤器，如图1 if(！definition){ return this . options[type ' s '][id]} else {/*伊斯坦布尔忽略if */if ('development '！==“production”类型===“component”){ validatecomponent name(id)；}//如果它是一个组件方法，而定义是一个对象，如果(type==' component ' is lainnobject(definition)){ definition . name=definition . name | | id；//使用this.options._base.extend方法(即Vue.extend方法)将定义的对象转换为构造函数。//Vue . options . _ base=Vue；definition=this . options . _ base . extend(definition)；} if(type===' directive ' type of definition===' function '){ definition={ bind : definition，update : definition }；}//为此指定构造函数。options[' component ' s '][id]//全局组件、指令和过滤器，并将其挂在vue.options上，使用mergeOptions合并策略在init期间入侵实例以供实例使用。this . options[type ' s '][id]=definition；返回定义} }；});}图1:

在initAssetRegisters中，定义的对象通过this.options._base.extend方法和options转换为构造函数。_base.extend实际上就是Vue.extend接下来，我们来看看Vue.extend做了什么。

vue。extend=function(extend options){ extend options=extend options | | { }；var Super=这个；Super.cid//组件缓存var cachedCtors=extendOptions ._Ctor || (extendOptions ._ Ctor={ })；//如果组件已经被缓存在扩展选项上则直接取出if(缓存器[Superid]){返回缓存器[Superid]}//如果有名字属性，检验名字拼写是否合法var name=扩展选项。名称| |超级。选项。姓名；如果('发展！==“生产”名称){ validateComponentName(名称);} var Sub=函数VueComponent(选项){这个._init(选项);};//将某视频剪辑软件上原型的方法挂在子原型中，Sub的实例同时也继承了vue。原型上的所有属性和方法。 //关于原型的学习：http://www .cn博客。com/dolphinX/p/3286177。html sub。原型=对象。创建(超级。原型)；//Sub构造函数修正，学习于https://www.cnblogs.com/SheilaSun/p/4397918.html潜艇原型建造者=潜艇；Sub.cid=cid//通过某视频剪辑软件的合并策略合并添加项到新的构造器上子选项=合并选项（超级选项，扩展选项);//缓存父构造器sub[' Super ']=Super；//处理小道具和计算响应式配置项如果(Sub。选项。道具){ init道具$ 1(Sub)；} if(Sub。选项。计算的){ init计算的$ 1(Sub)；} //允许进一步扩展/混合/插件使用潜艇。扩展=超级。延伸；混合蛋白=超级混合蛋白；潜艇。use=super。使用；//在新的构造器上挂上某视频剪辑软件的工具方法资产类型. forEach(函数（类型){ Sub[type]=Super[type]；});//如果（名称){ Sub。选项。组件[名称]=Sub，则启用递归自查找；} //在扩展时保留对超级选项的引用。//稍后在实例化时，我们可以检查极好的的选项是否已经//更新。超选项=超选项；潜艇。扩展选项=扩展选项；子密封选项=extend({ }，子选项)；//缓存组件构造器在扩展选项上高速缓存器[SupID]=Sub；返回sub }；vue.extend返回了一个带有附加[计]选项的某视频剪辑软件构造器。这个构造器被命名为Sub，等待提出时候初始化。

initAssetRegisters完成之后，选项下挂载了全局组件按钮计数器，如图：

接下来调用新Vue()渲染某视频剪辑软件整体的生命周期

局部注册

如果不需要全局注册，或者是让组件使用在其它组件内，可以用选项对象的成分属性实现局部注册。

注册方式

new Vue({ El : ' # components-demo '，components : { ' button-counter ' : { template : ' # click BTN '，data : function(){ return { count : { 0 } } } } })具体过程

某视频剪辑软件局部组件注册也是通过initAssetRegisters()方法调用Vue.extend不同的是在createComponent()时，initMixin()里面有判断

如果(选项选项_isComponent) { //因为某视频剪辑软件动态合并策略非常慢，并且内部组件的选项都不需要特殊处理。 //调用initInternalComponent快捷方法，内部组件实例化initInternalComponent(vm，options)；} else { vm .$ options=合并选项(resolvecostructoroptions(VM。构造函数)，选项|| {}，VM)；}函数initInternalComponent (vm，options) { var opts=vm .$ options=对象。创建(虚拟机。构造函数。选项)；//这样做是因为它比动态枚举更快var parentVnode=选项._ parentVnodeopts。parent=选项。父母；选择_ parentVnode=parentVnode var vnode componentoptions=parentVnode。组件选项；选择。道具数据=VnodeComponentOptions。道具数据；选择_ parent listeners=VnodeComponentOptions。听众；选择_ render children=VnodeComponentOptions。儿童；选择_ ComponentTag=VnodeComponentOptions。标签；if(选项。render){ opts。render=选项。渲染；选择。静态renderfns=选项。静态呈现。} }选项的结构如图所示：