鍓嶈█鐔熸倝React鐨勯兘鐭ラ亾锛岄殢鐫€Reacthook鐨勫紩鍏ワ紝React鏈変簡涓€绉嶆柊鍨嬬殑鐘舵€佺鐞嗭紝Provider-Consumer妯″瀷锛屽彲浠ヨ鏄疄瀹炲湪鍦ㄧ殑璀︾ず銆傞殢鐫€Vue3.0鐨勫彂甯冿紝鎻愪緵浜嗘垜浠柊鐨勫睘浜嶸ue鐨勭姸鎬佺鐞嗗伐鍏稨ook+provider-inject銆傛湰鏂囧皢浠ユ蹇靛拰妗堜緥鐩哥粨鍚堢殑褰㈠紡锛岃瑙ｈ妯″紡鐨勭敤娉曞拰浼樺娍銆傛枃绔犵洰褰曪細寮曞嚭闂锛岃繖涓ā鍨嬭В鍐充簡浠€涔堥棶棰橈紵锛堜紭鐐癸級濡備綍浣跨敤锛屼唬鐮佽В鏋勶紝椤圭洰妗堜緥銆傦紙浠ヤ唬鐮佷负涓伙級寮曞嚭闂棣栧厛锛屾垜浼氶€氳繃鑷棶鑷瓟鐨勬柟寮忓紩鍑轰竴浜涢棶棰樺拰涔嬪墠鐨勮В鍐虫柟妗堛€傚甫鐫€闂瀛︿範鏄竴绉嶅緢濂界殑瀛︿範鏂瑰紡銆傦紙鎯充竴鎯筹級鍦╒ue涓紝鍏勫紵缁勪欢銆佺瀛欑粍浠舵槸濡備綍閫氫俊鐨勶紵鐪嬪埌绗竴涓棶浣狅紝浣犳槸涓嶆槸鍢磋寰井涓婃壃锛?5搴﹁浠版湜澶╃┖锛屽垬娴峰井寰繕璧凤紙濡傛灉浣犳病绉凁煒勶級锛屾垜瑙夊緱杩欎釜寰坋asyVuex锛涙棤璁哄涔堝鏉傜殑缁勪欢閫氫俊锛孷uex浼间箮閮芥槸涓€閿悶瀹氥€傝€孷uex浣滀负鐘舵€佺鐞嗙殑閲嶇鍒╁櫒锛屽湪闈㈠闇€瑕佸涓粍浠跺叡浜殑灏戦噺鏁版嵁鏃讹紝鏄剧劧鏄敤鏉ユ潃楦＄敤鐨勩€傚啀璇翠簡锛屽湪涓€涓皬鐨刅ue椤圭洰涓紝鍩烘湰涓嶇敤Vuex锛屾槸涓嶆槸澶噸浜嗭紵浜嬩欢鎬荤嚎锛涙鏂规硶閫氬父鐢ㄤ簬鍏勫紵绾у埆鐨勭粍浠堕€氫俊銆傜己鐐逛篃寰堟槑鏄撅紱EventBus涓嶄細闅忕潃缁勪欢鐨勯攢姣佽€岃嚜鍔ㄩ攢姣侊紝闇€瑕佹垜浠墜鍔ㄩ攢姣侊紱鎶婂畠鎸傚湪鍏ㄤ笘鐣岋紱娉ㄦ剰锛氫竴瀹氳璁板緱閿€姣侊紝涓嶇劧浼氭湁bug锛涗簨浠朵骇鐢熻€呭彧鑳藉崟鍚戝箍鎾紝鏃犳硶寰楀埌鎺ユ敹鑰呭鐞嗕簨浠剁殑缁撴灉锛沷thers锛坅ttrs锛宲rovide-inject锛坴ue2.x锛屾湰鍦扮紦瀛橈紝url浼犲弬锛夈€傝繖浜涙柟娉曚笉甯哥敤锛岃櫧鐒惰兘鍕夊己瑙ｅ喅璺ㄧ粍浠堕€氫俊锛屼絾閮芥湁绉嶈鎶涘純鐨勬劅瑙夈€傦紙鎴戣鎴戞€濊€凁煒勶級锛涘湪Vue2.x涓紝濡備綍杩涜閫昏緫澶嶇敤锛熶妇涓緥瀛愶細鍦ㄥ悗鍙扮鐞嗛」鐩腑锛屽涓彍鍗曪紙缁勪欢锛夊悓鏃朵娇鐢ㄤ竴鍫嗘暟鎹繘琛岃姳寮忓睍绀猴紝鍖呮嫭鍒楄〃灞曠ず銆侀ゼ鍥炬瘮渚嬨€佹姌绾垮浘瓒嬪娍銆佺儹鍥炬弿杩伴鐜囩瓑锛岃繖浜涚粍浠朵娇鐢ㄧ浉鍚岀殑鏁版嵁鍜屾暟鎹鐞嗛€昏緫锛堝鍒犳敼鏌ワ級锛涘鏋滄瘡涓粍浠跺彧鍐欎竴濂楄繖鏍风殑澶勭悊閫昏緫锛屾樉鐒朵笉绗﹀悎绋嬪簭鍛樼殑鏈€缁堢洰鐨勶紙鍋锋噿馃槀锛夛紱浠ュ線瑙ｅ喅鏂规锛歁ixins楂橀樁缁勪欢锛圚igher-orderComponents,akaHOCs锛塕enderlessComponents锛堝熀浜庝綔鐢ㄥ煙妲?浣滅敤鍩熸Ы灏佽閫昏緫鐨勭粍浠讹級鍏跺疄涓婇潰鍐欎笟鍔′唬鐮佺殑鏃跺€欙紝甯哥敤鐨勬槸mixins銆傞珮闃剁粍浠跺拰RenderlessComponents鍦ㄥ皝瑁呯粍浠剁殑鏃跺€欑敤鐨勬瘮杈冨銆傚畠浠殑缂虹偣锛氭ā鏉夸腑鐨勬暟鎹潵婧愪笉鏄庣‘锛屽懡鍚嶇┖闂村啿绐併€傞渶瑕侀澶栧祵濂楃粍浠跺疄渚嬫潵灏佽閫昏緫锛堟€ц兘闂锛夛紱閭ｄ箞Vue灏嗗浣曡В鍐充互涓婇棶棰樸€俢onceptcontext鎴戜滑闇€瑕佷娇鐢╬rovide+inject+hook鏉ュ垱寤轰竴涓猚ontext瀵硅薄锛屽苟鏆撮湶supplier锛堜竴鑸湪缁勪欢鏍戜腑鐨勪笂灞備綅缃拰consumer锛堟敞鍏ワ級锛夛紝鍙涓婂眰缁勪欢浣跨敤浜唒rovide锛屾墍鏈塻ub-contextwithinthecontext缁勪欢鍙互閫氳繃inject璁块棶杩欎釜context鍐呯殑鏁版嵁锛屼笉闇€瑕佷紶閫抪rops銆備篃灏辨槸璇达紝瀹冩彁渚涗簡涓€涓泦鍚堢鐞嗗拰鍝嶅簲寮忓璞★紝骞朵笖闄愬埗浜嗚繖涓璞＄殑鍙闂寖鍥达紝鑼冨洿鍐呯殑瀛愮粍浠跺彲浠ヨ幏鍙栧埌濂圭殑鍐呴儴鍊笺€俻rovide+inject鍦ㄤ笂灞傜粍浠朵腑閫氳繃provide鎻愪緵涓€浜涘彉閲忥紝鍦ㄥ瓙缁勪欢涓彲浠ラ€氳繃inject鑾峰彇provide鐢ㄦ硶锛歱rovide鎺ュ彈涓や釜鍙傛暟锛岀涓€涓弬鏁版槸provide鐨勫敮涓€鍚嶇О锛屾渶濂戒娇鐢⊿ymbol閬垮厤閲嶅銆傜浜屼釜鍙傛暟鏄綘瑕佹毚闇茬殑鏁版嵁provide(ThemeSymbol,data)inject鐢ㄦ硶锛歩nject鎺ユ敹涓や釜鍙傛暟锛岀涓€涓弬鏁版槸provide鐨勫悕绉帮紝鍗砊hemeSymbol锛岀浜屼釜鍙傛暟鏄痯rovide鏆撮湶鐨勬暟鎹紝閭ｅ氨鏄暟鎹€侶ookVue3.0鐨刢ompositionapi鍜宻etup涓篤ue鎻愪緵浜咹ook鑳藉姏銆侶ook鐨勫瓨鍦ㄥ彲浠ヨ浣犲湪缁勪欢澶栭儴灏佽鍏叡鏂规硶锛屽疄鐜伴€昏緫澶嶇敤銆傚洜姝わ紝鎴戜滑鍙互鍦?vue缁勪欢澶栬嚜瀹氫箟Hook锛屽垱寤篶ontext锛涙枃浠剁洰褰曡В鏋勬牴鎹互涓婃蹇靛拰鍔熻兘锛屽垎鏋愰渶瑕佸畬鎴愮殑姝ラ锛氬垱寤哄叕鍏变笂涓嬫枃锛屽皝瑁呰嚜瀹氫箟hookprovidesupplydatainjectthefilehereConstruction:context鈹溾攢context//涓婁笅鏂囨枃浠跺す鈹溾攢index.js//Context鏍圭粍浠讹紝缁熶竴寮曞叆鍚勪釜妯″潡鐨勪笂涓嬫枃锛屽苟缁熶竴鏆撮湶鈹傗攢home//浠ユā鍧楀悕鍛藉悕锛屾瘡涓ā鍧楅兘鏈変笂涓嬫枃鈹傗攢index.jsView鈹溾攢View鈹溾攢Home鈹溾攢index.vue//鏍圭粍浠讹紝鍦ㄦ湰灞傛敞鍏nject鈹溾攢xxx.vue//鍏朵粬缁勪欢娑堣垂鑰呬綅缃垎灞備娇鐢ㄤ负浜嗕究浜庣悊瑙ｏ紝鎴戣繖閲屼互Todolist椤圭洰涓轰緥锛涙簮鐮侊細https://github.com/961998264/todolist-vue-3.0椤圭洰浠嬬粛锛氭柊澧炲緟鍔炰簨浠剁紪杈戝緟鍔炰簨浠跺垹闄ゅ緟鍔炰簨浠舵煡鐪嬪緟鍔炰簨浠?.鍒涘缓context涓婁笅鏂?/introducecompositionapiimport{provide,ref,Ref,inject,computed,}from'vue'//providenameexportconstlistymbol=Symbol()//鑷畾涔塰ook锛屽€熺敤Reacthook鍛藉悕鏍囧噯锛屼互use寮€澶磂xportconstuseProvide=()=>{constlist=ref([])//鑾峰彇鍒楄〃constgetList=asyncfunction(){...}//娣诲姞鍒楄〃constaddList=(item)=>{...}//鍒犻櫎浜嬩欢constdelList=(id)=>{...},...//provideexposedataprovide(listymbol,{list,getList,addList,delList})}2.娉ㄥ叆骞剁敤浜庡湪鏍圭粍浠剁储寮曚腑娉ㄥ叆import{inj銆傝鍥緀ct}from'vue'import{listymbol}from'@/context/home/index'setup(){constlistContext=inject(listymbol)console.log("setup->listContext",listContext)}濡傛灉浣犲儚杩欐牱浣跨敤瀹僼his娌℃湁锛屼絾鏄垜浠箣鍓嶈杩囷紝鍦ㄤ竴涓ぇ鐨勯」鐩腑锛屾瘡涓ā鍧楀彲鑳介兘鏈夎嚜宸辩殑涓婁笅鏂囥€備负浜嗘柟渚跨鐞嗭紝鎴戜滑鏈€濂藉杩欑被'useProvide'寤虹珛涓€涓粺涓€鐨勭鐞嗕腑蹇冭鎴戜滑缂栬緫骞舵坊鍔犱竴浜涢€昏緫//introducecompositionapiimport{provide,ref,Ref,inject,computed,}from'vue'//providenameexportconstlistymbol=Symbol()//鑷畾涔塰ook锛屽€熺敤Reacthook鍛藉悕鏍囧噯锛屽紑濮媤ithuseexportconstuseProvide=()=>{constlist=ref([])//鑾峰彇鍒楄〃constgetList=asyncfunction(){...}//娣诲姞鍒楄〃constaddList=(item)=>{...}//鍒犻櫎浜嬩欢constdelList=(id)=>{...},...//鎻愪緵鏆撮湶鐨勬暟鎹畃rovide(listymbol,{list,getList,addList,delList})//鏂版坊鍔犵殑閫昏緫瀵煎嚭constuseInject=()=>{constlistContext=inject(listymbol);if(!listContext){thrownewError(`useListInject蹇呴』鍦╱seListProvide涔嬪悗浣跨敤`);}returnlistContext};}index.js缁熶竴瀵煎叆骞跺埌澶勫鍑?){//鍦ㄩ《灞傜粍浠朵腑鎻愪緵鏁版嵁useProvide()}injectuses閫氳繃inject娉ㄥ叆鏁版嵁import{useInject}from'@/context/index.js'setup(){//鍦ㄩ《灞傛彁渚涙暟鎹粍浠禼onst{list,getList...}=useInject()return{list,getList}}鏈€鍚巋ome妯″潡鐨勪笂涓嬫枃灏卞畬鎴愪簡銆傚彲浠ョ湅鍑猴紝home妯″潡涓嬬殑浠讳綍缁勪欢閮藉彲浠ュ叡浜暟鎹紙鍒楄〃锛夛紝骞跺鐢ㄥ鐞嗗垪琛ㄧ殑鍏叡鏂规硶銆傝繖鏍蜂笉浠呴伩鍏嶄簡Vue2.x璺ㄧ粍浠堕€氫俊鐨勫潙锛岃€屼笖鍦ㄥ悗鏈熺殑缁存姢涓紝閫昏緫鑱氬悎浼氳鎴戜滑鏇村鏄撴壘鍒版暟鎹殑鎵€鏈夌浉鍏抽€昏緫锛岃€屼笉鏄寜缁勪欢鍒掑垎銆傛渶鍚庯紝濡傛灉鏈変笉瀵圭殑鍦版柟锛屾杩庡ぇ瀹剁暀瑷€鎸囨銆傚鏋滄湰鏂囧鎮ㄦ湁甯姪锛岃鐐逛釜璧炪€傛壂鐮乢鎼滅储鑱斿悎閫氳鏂瑰紡-鐧借壊鐗?png
