Vue3鑷畾涔塇ooks瀹氫箟锛氫釜浜虹悊瑙ｏ細涓€浜涘彲澶嶇敤鐨勬柟娉曞儚閽╁瓙涓€鏍锋寕璧锋潵锛屽彲浠ラ殢鏃跺紩鍏ヨ皟鐢紝杈惧埌楂樺唴鑱氫綆鑰﹀悎鐨勭洰鐨勩€傚彲浠ョ湅浣滄槸涓€涓挬瀛愶紱涓轰粈涔圴ue3浣跨敤鑷畾涔塇ook锛?缁撹锛氭槸涓轰簡璁〤ompositionApi鏇存槗鐢紝鏇翠赴瀵岋紝璁╁啓Vue3鏇存剦蹇紒鍍忓啓璇椾竴鏍峰啓浠ｇ爜锛佸叾瀹炶繖閬撻鏇存繁灞傜殑鎰忔€濆氨鏄负浠€涔圴ue3姣擵ue2濂斤紒鏃犲懠鍑烘€ц兘澶у箙鎻愬崌銆傚叾瀹炵紪鐮佷綋楠屼篃鏄疺ue3鐨勪竴涓紭鍔裤€侰ompositionApi鐨勫紩鍏ワ紙瑙ｅ喅OptionApi鍦ㄤ唬鐮侀噺澶х殑鎯呭喌涓嬬殑寮鸿€﹀悎锛夎寮€鍙戣€呮湁鏇村ソ鐨勫紑鍙戜綋楠屻€備釜浜烘兂娉曪細浣嗘槸杩欎簺鎵€璋撶殑寮€鍙戜綋楠岀殑鎻愬崌锛岄渶瑕佸紑鍙戣€呬笉鏂涔狅紝鍏绘垚鑹ソ鐨勭紪鐮佷範鎯€傝繕鏈塚ue3鍐機ompositionApi锛屾湁鐨勪汉鍐欏緱鍍忚瘲锛屾湁鐨勪汉鍐欏緱鍍忚瘲銆傪煉╁悓锛堢湡蹇冨笇鏈涙瘡涓紑鍙戣€呴兘鏈変竴棰楃儹鐖辨妧鏈殑蹇冿紝涓嶈涓轰簡寮€鍙戣€屽紑鍙戯紝鍓嶄汉鍐欏嚭鏉ョ粰鍚庝汉灏濆皾锛佹姳姝夋渶杩戠淮鎶よ€侀」鐩お澶氫簡锛夊啓Vue3锛岃鏀规帀Vue2鏃犺剳杩欎釜鎯虫硶锛歏ue2寰堝鍚屽宸茬粡鍏绘垚浜嗕娇鐢∣ptionApi鐨勪範鎯紝娌℃兂杩囪繖涓€傚埌浜哣ue3鐨凜ompositionApi锛屼粬浠繕鏄兂涔犳儻鐢ㄨ繖涓€傜敋鑷虫湁浜轰负浜嗗啓杩欎釜寮曞叆getCurrentInstance锛佽繖鏄笉蹇呰鐨勶紒CompositionApi鐨勪紭鐐逛箣涓€灏辨槸鎽嗚劚浜嗘棤鑴憈his甯︽潵鐨勫己鑰﹀悎銆傚嚱鏁颁簰涓簍his锛屽彉閲忓拰鏂规硶娣峰悎鍦ㄦ瘡涓柟娉曚腑銆傛棤澶勪笉鍦ㄧ殑this鏄己鑰﹀悎鐨勩€傝櫧鐒舵柟渚匡紝浣嗘槸optionapi鍚庢湡纰庣墖鍖栵紝缁存姢楹荤儲銆傜浉淇″啓Vue2鐨勫悓瀛︿竴瀹氭繁鍙楁劅鍔ㄣ€備竴涓粍浠跺畾涔変簡澶ч噺鐨勫彉閲忓拰鏂规硶锛屾柟娉曞祵濂楁柟娉曪紝鏂规硶涔嬮棿鍏变韩鍙橀噺銆傝缁存姢杩欐牱鐨勪唬鐮侊紝鐪嬩技閫氫織鏄撴噦鐨凮ptionApi鍐欐硶锛屾垜浠渶瑕佸湪鏂规硶銆佹暟鎹€佹ā鏉夸箣闂存潵鍥炲垏鎹紝OptionApi鐨勫啓娉曞湪浠ｇ爜閲忓拰鍔熻兘杈冨皬鐨勬儏鍐典笅闈炲父绠€鍗曟槑浜嗭紝浣嗘槸褰撲唬鐮侀噺澶э紝鍔熻兘澶嶆潅鐨勬椂鍊欙紝鐩镐俊review浠ｇ爜浼氬緢澶寸柤銆傜浉瀵逛簬CompositionApi锛屽湪鍔熻兘澶嶆潅銆佷唬鐮侀噺澶х殑缁勪欢涓嬶紝閰嶅悎鑷畾涔塇ooks灏嗕唬鐮佸啓鍦ㄥ姛鑳藉潡涓紝涓€璧峰畾涔夊拰璋冪敤鍝嶅簲鍙橀噺鍜屾柟娉曪紝杩欐牱鎴戜滑鍙渶瑕佸叧娉ㄥ姛鑳藉綋鎴戜滑绋嶅悗鏇存敼鍔熻兘A鏃躲€俠lock涓嬬殑浠ｇ爜涓嶉渶瑕佸儚OptionApi涓殑Vue2閭ｆ牱鍚屾椂鍏虫敞methos鍜宒ata銆?...璁╂垜浠€氳繃鍑犱釜鍔ㄧ敾鍐嶆鍥為【涓€涓婥ompositionApi锛佹劅璋㈠ぇ甯呰€佹簮鍏堢敓鐨勫姩鐢汇€侰ompositionApiVSOptionApi鐨勪紭缂虹偣鍦ㄥ姩鐢讳笂涓€鐩簡鐒讹紒OptionApi浠ｇ爜閲忓皬锛屼絾鏄唬鐮侀噺澶у緢瀹规槗瀵艰嚧楂樿€﹀悎锛佽鏄庯細浠ヤ笂鏄疺ue2OptionApi鐨勫啓娉曘€備竴涓粍浠跺寘鍚暟鎹€佹柟娉曘€佽绠楀拰鐩戣銆傞渶瑕佸湪杩欎簺鍑芥暟涓婂垎鍒啓鐩稿悓鐨勫嚱鏁般€傚鏋滀唬鐮侀噺灏戯紝鐪嬭捣鏉ュ氨寰堟竻妤氫簡銆備竴鏃︿唬鐮侀噺澶э紝鍔熻兘澶嶆潅锛屾瘡涓姛鑳藉崟鐙啓锛岀淮鎶ゆ椂data銆乵ethos銆乧omputed銆亀atch閮介渶瑕佹潵鍥炲垏鎹紝杩囦簬鍒嗘暎锛岃€﹀悎搴﹂珮銆侰ompositionApi瑙ｈ€ue2OptionApi锛屽疄鐜颁綆鑰﹀悎楂樺唴鑱氳鏄庯細濡傛灉CompositionApi鍦ㄥ姛鑳藉鏉傦紝浠ｇ爜閲忓ぇ鐨勭粍浠朵笅锛屾垜浠厤鍚堣嚜瀹氫箟Hook灏嗕唬鐮佸啓鎴愬姛鑳藉潡锛屽畾涔夊彉閲忓拰鏂规硶涓€璧峰苟璋冪敤锛屾瘮濡傚搷搴斿紡鐨勫彉閲忓拰鏂规硶閮介泦鎴愬湪A鍑芥暟涓嬶紝鎴戜滑鍙渶瑕佹敼A鍑芥暟妯″潡涓嬬殑浠ｇ爜鏂逛究鍚庢湡缁存姢锛屽氨涓嶉渶瑕佸叧娉ㄩ€昏緫涓婂垎鏁ｇ殑鏂规硶鍜屾暟鎹簡鍚屾椂鍍廣ue2涓殑OptionApi銆傛墍浠ヨ嚜瀹氫箟Hook鍐橵ue3涓€瀹氳鎺屾彙锛侀兘浣撶幇浜哣ue3CompositionApi浣庤€﹀悎楂樺唴鑱氱殑鎬濇兂锛佺湅浜嗗畼鏂规枃妗ｅ拰寮€婧愮殑admin妯℃澘锛岀瑪鑰呬娇鐢ㄤ簡寰堝鑷畾涔夌殑Hooks锛佸ぇ鑳嗗畾涔塚ue3鐨勮嚜瀹氫箟Hook锛氳櫧鐒跺畼鏂规病鏈夋槑纭鏄庢垨瀹氫箟浠€涔堟槸鑷畾涔塇ooks锛屼絾鍒板閮藉湪浣跨敤锛涘皢涓€浜涘彲澶嶇敤鐨勬柟娉曚互鍑芥暟鐨勫舰寮忔娊鍙栧嚭鏉ワ紝鍍忛挬瀛愪竴鏍锋寕璧锋潵锛屽彲浠ラ殢鏃惰皟鐢ㄥ紩鍏ヤ娇鐢紝杈惧埌楂樺唴鑱氫綆鑰﹀悎鐨勭洰鐨勶紱灏嗗彲閲嶇敤鍑芥暟鎻愬彇鍒板閮↗S鏂囦欢涓€俢onst{nameRef,Fn}=useXX()锛堝湪setup鍑芥暟涓В鏋勮嚜瀹氫箟hooks鐨勫彉閲忓拰鏂规硶锛変緥瀛愶細绠€鍗曠殑鍔犲噺娉曡绠楋紝灏嗗姞鍑忔硶鍒嗙鍒?涓嚜瀹氫箟Hooks涓紝灏嗗搷搴斿叕寮忕浉浜掍紶閫掓暟鎹姞娉曞嚱鏁?Hookimport{ref,watch}from'vue';constuseAdd=({num1,num2})=>{constaddNum=ref(0)watch([num1,num2],([num1,num2])=>{addFn(num1,num2)})constaddFn=(num1,num2)=>{addNum.value=num1+num2}return{addNum,addFn}}exportdefaultuseAdd鍑忔硶鍑芥暟-Hook//鍑忔硶鍑芥暟-Hookimport{ref,watch}from'vue';exportfunctionuseSub({num1,num2}){constsubNum=ref(0)watch([num1,num2],([num1,num2])=>{subFn(num1,num2)})constsubFn=(num1,num2)=>{subNum.value=num1-num2}杩斿洖{subNum,subFn}}鍔犲噺娉曡绠楃粍浠?template>
num2:
鍑忔硶绛変簬锛歿{subNum}}閫氳繃涓婇潰鐨勪緥瀛愶紝璇磋Vue3鑷畾涔塇ooks鍜孷ue2鏃朵唬Mixin鐨勫叧绯伙細Mixin涓嶅鐢ㄥ湪Vue2涓紝mixin鏄痬ain灏嗕竴浜涚粍浠堕€昏緫鎶借薄涓哄彲閲嶇敤鍧楃殑宸ュ叿浣嗘槸锛屽畠浠湁鍑犱釜闂锛?.Mixin瀹规槗鍙戠敓鍐茬獊锛氱敱浜庢瘡涓猰ixin鐨勫睘鎬ч兘鍚堝苟鍒板悓涓€涓粍浠朵腑锛屾偍浠嶇劧闇€瑕佷簡瑙ｆ墍鏈夊叾浠栧姛鑳戒互閬垮厤灞炴€у悕绉板啿绐併€?.澶嶇敤鎬ф湁闄愶細鎴戜滑涓嶈兘缁檓ixin浼犻€掍换浣曞弬鏁版潵鏀瑰彉瀹冪殑閫昏緫锛岃繖闄嶄綆浜嗗畠浠娊璞￠€昏緫鐨勭伒娲绘€с€備笂闈竴娈垫槸Vue3瀹樻柟鏂囨。鐨勫唴瀹癸紝鍙互褰掔撼琛ュ厖濡備笅锛?.Mixin闅捐拷婧殑鏂规硶鍜屽睘鎬э紒Vue3customHooks鍙互鏄疺ue3customHooks锛屽湪寮曠敤鐨勬椂鍊欐樉寮忔毚闇插搷搴斿彉閲忔垨鏂规硶锛屽锛歝onst{nameRef,Fn}=useXX()Mixinsexportdefault{mixins:[a,b,c,d,e,f,g],//涓€涓粍浠朵腑鍙互娣峰叆鍚勭鍔熻兘鐨刴ixinmounted(){console.log(this.name)//闂鏉ヤ簡锛岃繖涓悕瀛楁潵鑷摢涓猰ixin锛焳}Mixin鏈煡娣锋穯锛屾垜浠棤娉曠煡閬撹灞炴€ф潵鑷摢涓狹ixin鏂囦欢锛岀粰鍚庢湡缁存姢甯︽潵鍥伴毦Vue3鑷畾涔塇ooks//闄勫姞鍑芥暟-鑷畾涔塇ook(鏆撮湶鍝嶅簲鍙橀噺鎴栨柟娉曞舰寮?const{addNum,addFn}=useAdd({num1,num2})addFn(num1.value,num2.value)//鍑忔硶鍑芥暟-鑷畾涔塇ook(鏆撮湶鍝嶅簲鍙橀噺鎴栨柟娉曞舰寮?const{subNum,subFn}=useSub({num1,num2})subFn(num1.value,num2.value)鎴戜滑寰堝鏄撶湅鍒版瘡涓狧ooks鏄惧紡鏆撮湶鐨勫搷搴斿紡鍙橀噺鍜屾柟娉?.浼犲弬鏁扮粰Mixin鏀瑰彉閫昏緫鏄笉鍙兘鐨勶紝浣嗘槸Vue3鑷畾涔塇ooks鍗村彲浠ワ細Vue3鑷畾涔塇ooks鍙互鐏垫椿浼犻€掍换浣曞弬鏁版潵鏀瑰彉瀹冪殑閫昏緫銆傚弬鏁颁笉闄愪簬鍏朵粬閽╁瓙鍏紑鐨勫彉閲忋€俶ixinsexportdefault{mixins:[addMixin,subMixin],//鍔犲噺娣峰悎鍒扮粍浠禡ixinmounted(){this.add(num1,num2)//璋冪敤addMixin閲岄潰鐨刟dd鏂规硶this.sub(num1,num2)//璋冪敤subMixin鍐呴儴鐨剆ub鏂规硶}}鍙互閫氳繃璋冪敤Mixin鐨勫唴閮ㄦ柟娉曚紶閫掑弬鏁帮紝浣嗘槸涓嶈兘鐩存帴缁橫ixin浼犻€掑弬鏁帮紝鍥犱负Mixin娌℃湁浠ュ嚱鏁扮殑褰㈠紡鏆撮湶鍑烘潵锛屼笉鍙戦€佸紩鐢ㄥ弬鑰僔ue闈㈣瘯棰樿瑙ue3鑷畾涔塇ook鍦ㄤ笂闈緥瀛愮殑鍩虹涓婃坊鍔犱竴涓櫘閫氱殑Hookt{ref,watch}鏉ヨ嚜鈥渧ue鈥濓紱瀵煎嚭鍑芥暟useAverage(addNum){constaverageNum=ref(0);watch(addNum,(addNum)=>{averageFn(addNum);});constaverageFn=(addNum)=>{averageNum.value=addNum/2;};return{averageNum,averageFn,};}Insidethecomponent//Insidethecomponent//Additionfunction-customHook锛堟毚闇插搷搴斿彉閲忔垨鏂规硶褰㈠紡锛塩onst{addNum,addFn}=useAdd({num1,num2})addFn(num1.value,num2.value)//涓诲姩璋冪敤锛岃繑鍥炴渶鏂扮殑addNum//Average鍑芥暟-鑷畾涔塇ook-hook浼犲叆鍙傛暟鍊艰鍏朵粬hook鏆撮湶Variableconst{averageNum,averageFn}=useAverage(addNum)averageFn(addNum.value)Vue3鑷畾涔塇ooks鍙互鐏垫椿鍦颁紶閫掍换浣曞弬鏁版潵鏀瑰彉瀹冪殑閫昏緫銆傚弬鏁颁笉灞€闄愪簬鍏朵粬hooks鏆撮湶鐨勫彉閲忥紝鎻愰珮浜哣ue3鍦ㄩ€昏緫涓婄殑鎶借薄鐏垫椿鎬?.鍚屽悕鐨刴ixin鍙橀噺浼氳瑕嗙洊銆俈ue3鑷畾涔塇ook鍦ㄥ紩鍏ユ椂鍙互閲嶅懡鍚嶅悓鍚嶅彉閲忋€俶ixinsexportdefault{mixins:[addMixin,subMixin],//鍔犲噺娣峰悎鍦ㄧ粍浠朵腑Mixinmounted(){this.add(num1,num2)//璋冪敤鍔犳硶閲岄潰鐨刟dd鏂规硶addMixinthis.sub(num1,num2)//璋冪敤鍑忔硶閲岄潰鐨剆ub鏂规硶subMixin}}濡傛灉this.add(num1,num2)鍜宼his.sub(num1,num2)璁＄畻缁撴灉杩斿洖鍚屽悕鍙橀噺totalNum銆傜敱浜嶫S鍗曠嚎绋嬶紝鍚庨潰浠嬬粛鐨勪細瑕嗙洊鍓嶉潰鐨勩€倀otalNum鏈€缁堝氨鏄噺娉晄ub鐨勫€笺€俥xposed)const{totalNum:addNum,addFn}=useAdd({num1,num2})addFn(num1.value,num2.value)//鍑忔硶鍑芥暟-鑷畾涔塇ook锛堟毚闇插搷搴斿彉閲忔垨鏂规硶褰㈠紡锛塩onst{totalNum:subNum,subFn}=useSub({num1,num2})subFn(num1.value,num2.value)鍦╒ue3鑷畾涔塇ooks涓紝铏界劧鍔犲噺Hooks閮借繑鍥瀟otalNum锛屼絾鏄緢瀹规槗鐢‥S6瀵硅薄瑙ｆ瀯鍙橀噺閲嶅懡鍚嶆€荤粨锛歄ptionApi鍦╒ue2鏃朵唬锛宒ata銆乵ethos銆亀atch.....閮芥槸鍒嗗紑鍐欑殑銆傝繖鏄浂鏁ｅ拰鍒嗘暎鐨勩€備竴鏃︿唬鐮佽繃澶氾紝灏卞鏄撳嚭鐜伴珮鑰﹀悎銆傜淮鎶ゆ湡闂存潵鍥炲垏鎹唬鐮佸緢楹荤儲锛乂ue3鏃朵唬鐨凜ompositionApi锛岄€氳繃浣跨敤鍚勭Hooks鍜岃嚜瀹氫箟Hooks鍦ㄥ姛鑳藉潡涓紪鍐欑鐗囧寲鐨勫搷搴斿紡鍙橀噺鍜屾柟娉曪紝瀹炵幇楂樺唴鑱氫綆鑰﹀悎褰㈣薄鍦拌鏂规硶锛歏ue3鑷畾涔塇ooks鏄痗omponents涓嬬殑functionscopes锛屽拰Mixins鍦╒ue2鏃朵唬鏄粍浠朵笅鐨勫叏灞€浣滅敤鍩熴€傚叏灞€浣滅敤鍩熸湁鏃舵槸涓嶅彲鎺х殑锛屽氨鍍弙ar鍜宭et绛夊彉閲忓０鏄庡叧閿瓧涓€鏍凤紝const鍜宭et鏄var鐨勪慨楗般€侰ompositionApi鍙槸瀵筕ue2鏃朵唬OptionApi鐨勯珮鑰﹀悎鍜岄殢澶勫彲瑙佺殑榛戠洅鐨勪慨姝ｃ€俈ue3鑷畾涔塇ooks鏄竴绉嶆敼杩涖€傚姣擬ixin鍜岃嚜瀹氫箟Hook锛屼竴涓槸OptionApi鐨勪綋鐜帮紝涓€涓槸CompositionApi鐨勪綋鐜般€傚鏋滀綘鑳界悊瑙ｉ珮鍐呰仛浣庤€﹀悎鐨勬€濇兂锛岄偅涔堜綘灏辫兘鐞嗚В涓轰粈涔圴ue3浣跨敤CompositionApi骞堕€氳繃鍚勭鑷畾涔塇ooks璁╀唬鐮佹洿寮哄ぇ銆傚儚鍐欒瘲涓€鏍峰啓浠ｇ爜銆傝€屼笉鏄啓鐙楀睅銆?/p>