vue.js源碼全方位深入解析第03章組件化

上一章我們在分 的html，像上一章的例子那樣是一個普通

VNode節(jié)點(diǎn)，否則通 方法創(chuàng)建一個組件VNodeifif(typeoftag==='string')letns=(context.$vnode&&context.$vnode.ns)||config.getTagNamespaceifTag(tag))tformbuilt-invnode=new tformTagName(tag),data,children,undefined,undefined,context)}elseif(isDef(Ctor=resolveAsset(context.$options,'components',tag))){//vnodeponent(Ctor,data,context,children,}else//unknownorunlistednamespaced//checkatruntimebecauseitmaygetassignedanamespacewhens//parentnormalizesvnode=newVNode(tag,data,children,undefined,undefined,)}}}else//directcomponentoptions/vnodeponent(tag,data,context,}App對象，它本質(zhì)上是一個它會走到上述代碼的else

vnode

exportexportponentCtor:Class<Component>|Function|Object|data:?VNodeData,context:Component,children:?Array<VNode>,tag?:string):VNode|Array<VNode>|void{if(isUndef(Ctor)){}constbaseCtor=inoptionsobject:turnitintoaif(isObject(Ctor))Ctor=}//ifatthisstageit'snotaconstructororanasynccomponent//if(typeofCtor!=='function')if(process.env.NODE_ENV!=='production')warn(`InvalidComponentdefinition:${String(Ctor)}`,}}//asyncletif(isUndef(Ctor.cid))asyncFactory=Ctor ponent(asyncFactory,baseCtor,if(Ctor===undefined)//return ceholdernodeforasynccomponent,whichis//asacommentnodebutpreservesalltherawinformationforthenode.//theinformationwillbeusedforasyncserver-renderingandhyreturn )}}data=data||//resolveconstructoroptionsincaseglobalmixinsareappliedr//componentconstructor//transformcomponentv-modeldataintoprops&if(isDef(data.model))transformModel(Ctor.options,}//extractconstpropsData=extractPropsFromVNodeData(data,Ctor,//functionalif(isTrue(Ctor.options.functional))returnc ponent(Ctor,propsData,data,context,ch}//extractlisteners,sincetheseneedstobetreated//childcomponentlistenersinsteadofDOMconstlisteners=// cewithlistenerswith.native//soitgetsprocessedduringparentcomponentdata.on=if )) componentsdonotkeep//otherthanprops&listeners&//workaroundconstslot=data=if(slot)data.slot=}}//installcomponentmanagementhooksonto ceholder//return ceholderconstname=C||constvnode=new ponent-${Ctor.cid}${name?`-${name}`:data,undefined,undefined,undefined,{Ctor,propsData,listeners,tag,children)//Weexspecific:invokerecycle-listoptimized@renderfunction//extractingcell-slot /*istanbulignoreifif(WEEX ponent(vnode))return }returnreturn}

case3vnodeconstconstbaseCtor=inoptionsobject:turnitintoaif(isObject(Ctor))Ctor=}App.vueoWorldfromexportdefaultname:'app',components:}}export的是一個對象，所以baseCtor.extend(Ctor)，在這里最開始初始化Vue

Vue中 函數(shù)有這么一段邏輯////thisisusedtoidentifythe"base"constructortoextend//componentswithinWeex'smulti-instanceVue.options._baseVue.options._base=context.$options，實(shí)際上在

Vue vm.$options=mergeOptions(vm.$options=mergeOptions(options||{},)這樣就把Vue上的一 擴(kuò)展到了vm.$option上，所以我們也就能 拿到Vue這個構(gòu)造函數(shù)了。mergeOptions的實(shí)現(xiàn)我們會Vue 和用戶傳入 上src/core/global-src/core/global-

Vue之后，我們來看一下

*ClassVue.extend=function(extendOptions:Object):Function{extendOptions=extendOptions||{}constSuper=constSuperId=constcachedCtors=extendOptions._Ctor||(extendOptions._Ctor={})if(cachedCtors[SuperId]){return}constname=extendO||Sif(process.env.NODE_ENV!=='production'&&name){}constSub= ponent(options)}Stotype=Stotype.constructor=Sub.cid=Sub.options=)Sub['super']=//Forpropsandcomputedproperties,wedefine getters//theVueinstancesatextensiontime,ontheextendedprototype.//avoidsObject.definePropertycallsforeachinstanceif(Sps)}if puted)}//allowfurtherextension/mixin/pluginSub.extend=Sub.mixin=Sub.use=////createassetregisters,soextended//canhavetheirprivateassetstoo.ASSET_TYPES.forEach(function(type)Sub[type]=//enablerecursiveself-lookupif(name){ponents[name]=}//keepareferencetothesuperoptionsatextension//lateratinstantiationwecancheckifSuper'soptions//beenupdated.Sub.superOptions=Super.optionsSub.extendOptions=extendOptionsSub.sealedOptions=extend({},Sub.options)//cacheconstructorcachedCtors[SuperId]=SubreturnSub}

optionsAPI 構(gòu)造函數(shù)做了緩存避免多次執(zhí)

邏輯再次走到 constconstSub=ponent(options)}////installcomponentmanagementhooksontoceholderVue.jsVirtualDOMsnabbdom，它的一個特點(diǎn)是在VNode的patch流程中對外了各種時機(jī)的鉤子函數(shù)，方便我們做一些額外的事情，Vue.js也是充分利用這一點(diǎn)，在初始化一個Component類型的VNode的過程中實(shí)現(xiàn)了幾個鉤子函數(shù)：constconstcomponentVNodeHooks=init(vnode:VNodeWithData,hydrating:boolean):?boolean{if(ponentInstance&&ponentInstance._isDestroyed&&)//kept-alivecomponents,treatasaconstmountedNode:any=vnode//workaroundflowcomponentVNodeHooks.prepatch(mountedNode,mountedNode)}elseconstchildponentInstance)child.$mount(hydrating?vnode.elm:undefined,}prepatchde)ponentVNode,constoptionsconstchild ponentInstance psData,//updatedoptions.listeners,//updatedvnode,//newparentoptions.children//new)insert ponentVNode)const{context,componentInstance}=if(!componentInstance._isMounted)componentInstance._isMounted=callHook(componentInstance,}if(vnode.data.keepAlive)if(context._isMounted)//vue-//Duringupdates,akept-alivecomponent'schildcomponentsy//change,sodirectlywalkingthetreeheremaycall//onincorrectchildren.Insteadwepushthemintoaqueuech//beprocessedafterthewholepatchprocess}elseponent(componentInstance,true/*direct}}destroy ponentVNode)const{componentInstance}=if(!componentInstance._isDestroyed)if(!vnode.data.keepAlive)}elseponent(componentInstance,true/*direct}}}}consthooksToMerge= ponentHooks(data:VNodeData)consthooks=data.hook||(data.hook=for(leti=0;i<hooksToMerge.length;i++)constkey=constexisting=consttoMerge=if(existing!==toMerge&&!(existing&&existing._merged))hooks[key]=existing?mergeHook(toMerge,existing):}}}functionfunctionmergeHook(f1:any,f2:any):Function{constmerged=(a,b)=>{//flowcom insaboutextraargswhichiswhyweuseanyf1(a,b)f2(a,}merged._merged=truereturnmer