当前位置: 首页 > Web前端 > vue.js

Vue源码分析——选项合并策略分析(一)

时间:2023-03-31 17:59:25 vue.js

鏂囩珷棣栧彂浜庝釜浜哄崥瀹㈠皬鐏扮伆鐨勭┖闂撮€夐」鍚堝苟绛栫暐鍒嗘瀽灏唒ropsinject鎸囦护鐨勪笁涓€夐」杞崲鎴愮粺涓€鏍煎紡鍚庯紝寮€濮嬭繘琛岄€夐」鍚堝苟锛岀湅涓€涓嬪悎骞堕€夐」鐨勪唬鐮?/core/instance/init.js//寮€濮嬪悎骞堕€夐」constoptions={}letkeyfor(keyinparent){//棣栧厛灏嗙埗瀹炰緥涓殑閫夐」鍚堝苟鍒扮洰鏍囧璞′腑mergeField(key)}for(keyinchild){//閬嶅巻child锛屽鏋渃hild涓殑灞炴€у湪parent鏈韩涓嶅瓨鍦紝鍒欏皢灞炴€у悎骞跺埌parent涓璱f(!hasOwn(parent,key)){//mergeField(key)}}functionmergeField(key){//鍚勭閫夐」鐨勭粍鍚堢瓥鐣ュ畾涔夊湪starts瀵硅薄涓奵onststrat=strats[key]||defaultStratoptions[key]=strat(parent[key],child[key],vm,key)}鍚堝苟閫夐」锛屼紭鍏堜娇鐢ㄨ嚜瀹氫箟鍚堝苟绛栫暐锛屽鏋滆嚜瀹氫箟閫夐」绛栫暐涓嶅瓨鍦紝鍒欎娇鐢ㄩ粯璁ゅ悎骞剁瓥鐣ャ€俿tarts瀵硅薄涓殑姣忎釜閿搴斾竴涓€夐」鍚堝苟绛栫暐銆傞粯璁ゅ悎骞剁瓥鐣ユ槸榛樿閫夐」鍚堝苟绛栫暐銆傚鏋滃瓨鍦ㄥ瓙绫婚€夐」锛屽垯浣跨敤瀛愮被閫夐」瑕嗙洊鐖剁被閫夐」銆俢onstdefaultStrat=function(parentVal:any,childVal:any):any{returnchildVal===undefined锛焢arentVal:childVal}el閫夐」鍚堝苟绛栫暐el閫夐」鎻愪緵浜嗕竴涓凡缁忓瓨鍦ㄤ簬椤甸潰涓婄殑DOM鍏冪礌浣滀负Vue瀹炰緥鐨勬寕杞界洰鏍囥€俢hange閫夐」鍙瓨鍦ㄤ簬Vue瀹炰緥涓婏紝鍏朵粬瀛愮被鏋勯€犲嚱鏁颁笂涓嶅厑璁镐娇鐢╡l閫夐」vm,key){//鍙湁Vue瀹炰緥鏈塭l閫夐」锛屽叾浠栧瓙绫绘瀯閫犲嚱鏁颁笉鍏佽鏈塭l閫夐」if(!vm){warn(`option"${key}"canonlybeusedduringinstance`+'浣跨敤`new`鍏抽敭瀛楀垱寤恒€?)}returndefaultStrat(parent,child)}}dataoptionmergestrategystrats.data=function(parentVal:any,childVal:any,vm?:Component):?Function{if(!vm){if(childVal&&typeofchildVal!=='function'){//纭繚瀛愮被鐨勬暟鎹被鍨嬪繀椤绘槸鍑芥暟鑰屼笉鏄璞°€備娇鐢ㄥ璞¤繑鍥炴暟鎹被鍨嬪彲浠ュ疄鐜版湇鍔¢噸鐢ㄣ€俻rocess.env.NODE_ENV!=='production'&&warn('鈥滄暟鎹€濋€夐」搴旇鏄竴涓嚱鏁?+'杩斿洖缁勪欢涓殑姣忎釜瀹炰緥鍊?+'瀹氫箟銆?,vm)returnparentVal}//璋冪敤cmergeDataOrFn鍚堝苟閫夐」returncmergeDataOrFn(parentVal,childVal)}returnnmergeDataOrFn(parentVal,childVal,vm)}exportfunctionmergeDataOrFn(parentVal:any,childVal:any,vm?:Component):?Function{if(!vm){//鍦╒ue.extend鍚堝苟涓紝涓よ€呴兘搴旇鏄嚱鏁?/浼犲叆鐨勯€夐」鏄粍浠朵腑鐨勯€夐」锛屾墍浠ユ病鏈塿m瀹炰緥銆俰f(!childVal){returnparentVal}if(!parentVal){returnchildVal}returnfunctionmergedDataFn(){//鏁版嵁閫夐」鍦ㄧ埗绫诲拰瀛愮被鍚屾椂瀛樺湪鏃惰繑鍥炰竴涓嚱鏁帮紝骞惰皟鐢ㄧ◢鍚庡垵濮嬪寲鍝嶅簲绯荤粺鏃剁殑鏂规硶銆傜湡姝g殑鍚堝苟閫夐」returnmergeData(//灏嗗瓙绫诲疄渚嬪拰鐖剁被瀹炰緥鐨勬暟鎹嚱鏁扮殑杩斿洖缁撴灉浼犻€掔粰mergeData杩涜鍚堝苟typeofchildVal==='function'?childVal.call(this,this):childVal,typeofparentVal==='function'?parentVal.call(this,this):parentVal)}}else{//鎸傚湪Vue瀹炰緥鐨刣ata灞炴€т腑锛岃繖閲屽彲浠ユ槸涓€涓璞eturnfunctionmergedInstanceDataFn(){//瀹炰緥mergeconstinstanceData=typeofchildVal==='鍑芥暟'?childVal.call(vm,vm):childValconstdefaultData=typeofparentVal==='function'锛焢arentVal.call(vm,vm):parentValif(instanceData){//灏嗗疄渚嬬殑閫夐」涓嶸ue鏋勯€犲嚱鏁颁腑鐨勯€夐」鍚堝苟returnmergeData(instanceData,defaultData)}else{returndefaultData}}}}涓婇潰鍒嗘瀽鏉ヨ嚜浠g爜锛屽彲浠ュ彂鐜板湪vue瀹炰緥鐨勫垵濮嬪寲杩囩▼涓紝data閫夐」骞舵病鏈夌湡姝e悎骞讹紝鑰屾槸杩斿洖浜嗕竴涓嚱鏁帮紝杩斿洖鐨勫嚱鏁拌繑鍥炰簡mergeData鐨勬墽琛岀粨鏋滐紝涔熷氨鏄寮忕殑mergedata閫夐」鐨勫湪mergeData鍑芥暟涓棿鎴戜滑鏉ョ湅鐪媘ergeData鍑芥暟鐨勫疄鐜癴unctionmergeData(to:Object,from:?Object):Object{if(!from)returntoletkey,toVal,fromVal//Symbol灞炴€у彲浠ラ€氳繃Reflect鑾峰彇銆俹wnKeysconstkeys=hasSymbol锛烺eflect.ownKeys(from):Object.keys(from)for(leti=0;i