灏辩洰鍓嶈€岃█锛孋omposable锛堢粍鍚堝嚱鏁帮級搴旇鏄疺UE3搴旂敤绋嬪簭涓粍缁囦笟鍔￠€昏緫鐨勬渶浣虫柟寮忋€傚畠鍏佽鎴戜滑鎻愬彇鍜岄噸鐢ㄥ皬鍧楅€氱敤閫昏緫锛屼娇鎴戜滑鐨勪唬鐮佹洿鏄撲簬缂栧啓銆侀槄璇诲拰缁存姢銆傜敱浜庤繖绉嶇紪鍐橵UE浠ｇ爜鐨勬柟寮忕浉瀵硅緝鏂帮紝鎮ㄥ彲鑳芥兂鐭ラ亾缂栧啓缁勫悎鍑芥暟鐨勬渶浣冲疄璺垫槸浠€涔堬紵鏈郴鍒楁暀绋嬪彲浠ヤ綔涓烘偍鍜屾偍鐨勫洟闃熷湪缁勫悎寮忓紑鍙戣繃绋嬩腑鐨勫弬鑰冩寚鍗椼€傛垜浠皢娑电洊浠ヤ笅鍐呭锛?.濡備綍閫氳繃閫夐」瀵硅薄鍙傛暟浣挎偍鐨勭粍鍚堟洿鍏峰彲閰嶇疆鎬э紱馃憟杩欑瘒鏂囩珷鐨勪富棰?.浣跨敤ref鍜寀nref璁╂垜浠殑鍙傛暟鏇村姞鐏垫椿锛?銆佸浣曡浣犵殑杩斿洖鍊兼洿鏈夌敤锛?銆佷负浠€涔堜粠涓€涓帴鍙ｅ畾涔夊叆鎵嬶紝鍙互璁╀綘鐨勫鍚堝姛鑳芥洿寮哄ぇ锛?.濡備綍鍦ㄦ病鏈夆€滅瓑寰呪€濈殑鎯呭喌涓嬩娇鐢ㄥ紓姝ヤ唬鐮佲€斺€旇浣犵殑浠ｇ爜鏇村鏄撶悊瑙ｏ紱涓嶈繃锛岄鍏堬紝鎴戜滑闇€瑕佺‘淇濇垜浠悊瑙ｅ鍚堝嚱鏁版槸涓€鑷寸殑銆傝鎴戜滑鑺辩偣鏃堕棿瑙ｉ噴浠€涔堟槸缁勫悎鍑芥暟銆備粈涔堟槸Composable-鍙粍鍚堝嚱鏁帮紵鏍规嵁瀹樻柟鏂囨。锛屽湪Vue搴旂敤鐨勬蹇典腑锛屸€滃鍚堝嚱鏁扳€濇槸浣跨敤Vue鐨勭粍鍚圓PI鏉ュ皝瑁呭拰澶嶇敤鏈夌姸鎬侀€昏緫鐨勫嚱鏁般€傝繖鎰忓懗鐫€浠讳綍浣跨敤鍙嶅簲寮忓鐞嗙殑鏈夌姸鎬侀€昏緫閮藉彲浠ヨ浆鎹负澶嶅悎鍑芥暟銆傝繖鍜屾垜浠钩鏃跺皝瑁呭嚭鏉ョ殑鍏叡鏂规硶鏈変簺鍖哄埆銆傛垜浠皝瑁呯殑鍏叡鏂规硶閫氬父鏄棤鐘舵€佺殑锛氬畠鍦ㄦ帴鏀跺埌涓€浜涜緭鍏ュ悗绔嬪嵆杩斿洖鎵€闇€鐨勮緭鍑恒€傚鍚堝嚱鏁伴€氬父涓庣姸鎬侀€昏緫鐩稿叧鑱斻€傛垜浠潵鐪嬬湅瀹樻柟鐨勭粍鍚堝嚱鏁皍seMouse锛歩mport{ref,onMounted,onUnmounted}from'vue'//鎸夌収绾﹀畾锛岀粍鍚堝嚱鏁板悕浠モ€渦se鈥濆紑澶磂xportfunctionuseMouse(){//缁勫悎灏佽鐨勭姸鎬佸拰鐢卞鍚堝嚱鏁扮鐞哻onstx=ref(0)consty=ref(0)//澶嶅悎鍑芥暟鍙互闅忔椂鏇存敼鍏剁姸鎬併€俧unctionupdate(event){x.value=event.pageXy.value=event.pageY}//缁勫悎鍑芥暟涔熷彲浠ラ檮鍔犲埌瀹冩墍灞炵粍浠剁殑鐢熷懡鍛ㄦ湡//鏉ュ惎鍔ㄥ拰鍗歌浇鍓綔鐢╫nMounted(()=>window.addEventListener('mousemove',update))onUnmounted(()=>window.removeEventListener('mousemove',update))//閫氳繃杩斿洖鍊兼毚闇叉墭绠＄姸鎬乺eturn{x,y}}鎴戜滑灏嗙姸鎬佸畾涔変负refs锛屾垜浠細鍦ㄩ紶鏍囩Щ鍔ㄦ椂鏇存柊姝ょ姸鎬併€傞€氳繃杩斿洖x鍜寉锛屾垜浠彲浠ュ湪浠讳綍缁勪欢涓娇鐢ㄥ畠浠紝鐢氳嚦鍙互宓屽澶氫釜澶嶅悎鍑芥暟銆傚綋鎴戜滑鍦ㄧ粍浠朵腑浣跨敤X:{{x}}Y:{{y}}濡傛偍鎵€瑙侊紝鎴戜滑鍙互閫氳繃浣跨敤useMouse杞绘澗鍦伴噸鐢ㄦ閫昏緫銆傚彧闇€瑕佸緢灏戠殑浠ｇ爜锛屾垜浠氨鍙互鑾峰彇鍒扮粍浠朵腑鐨勯紶鏍囧潗鏍囩姸鎬併€傜幇鍦ㄦ垜浠澶嶅悎鍑芥暟鏈変簡鐩稿悓鐨勭悊瑙ｏ紝璁╂垜浠湅涓€涓嬬涓€绉嶅彲浠ュ府鍔╂垜浠啓鍑烘洿濂界殑澶嶅悎鍑芥暟鐨勬柟娉曘€傞€夐」瀵硅薄鍙傛暟澶у鏁板鍚堝嚱鏁伴兘鏈変竴涓垨涓や釜蹇呴渶鍙傛暟锛岀劧鍚庢槸涓€绯诲垪鍙€夊弬鏁颁互甯姪杩涜涓€浜涢澶栫殑閰嶇疆銆傚湪閰嶇疆澶嶅悎鍑芥暟鏃讹紝鎴戜滑鍙互灏嗕竴绯诲垪鍙€夐厤缃斁鍏ヤ竴涓€夐」瀵硅薄鍙傛暟涓紝鑰屼笉鏄竴闀夸覆鍙傛暟銆?/浣跨敤閫夐」瀵硅薄鍙傛暟褰㈠紡consttitle=useTitle('Anewtitle',{titleTemplate:'>>%s<<'});//Titleisnow">>Anewtitle<<"//浣跨敤multipleParameterformconsttitle=useTitle('Anewtitle','>>%s<<');//Titlenow">>Anewtitle<<"閫夐」瀵硅薄鍙傛暟褰㈠紡鍙互缁欐垜浠甫鏉ヤ竴浜涙柟渚匡細棣栧厛锛屾垜浠笉蹇呰浣忓弬鏁扮殑姝ｇ‘椤哄簭锛屽挨鍏舵槸鍦ㄥ弬鏁板緢澶氱殑鎯呭喌涓嬨€傝櫧鐒舵垜浠幇鍦ㄥ彲浠ラ€氳繃Typescript鍜宔ditorhints鏉ラ伩鍏嶈繖绉嶉棶棰橈紝浣嗘槸杩欑鏂瑰紡杩樻槸鏈夊尯鍒殑銆傚浜嶫avascript瀵硅薄锛屽弬鏁扮殑椤哄簭灏变笉閭ｄ箞閲嶈浜嗐€傦紙褰撶劧杩欎篃闇€瑕佹垜浠殑鍑芥暟瀹氫箟闇€瑕佹槑纭紝鍚庨潰鍐嶈锛夌浜岋紝浠ｇ爜鐨勫彲璇绘€ф洿寮猴紝鍥犱负鎴戜滑鐭ラ亾option鏄共浠€涔堢殑銆傜涓夛紝浠ｇ爜鏇村叿鍙墿灞曟€э紝浣垮緱浠ュ悗娣诲姞鏂伴€夐」鍙樺緱鏇村姞瀹规槗銆傝繖鏃㈤€傜敤浜庡悜缁勫悎鍑芥暟鏈韩娣诲姞鏂伴€夐」锛屼篃閫傜敤浜庡祵濂楁椂鐨勫弬鏁颁紶閫掋€傚洜姝わ紝浣跨敤瀵硅薄鍙傛暟鏄瘮杈冨弸濂界殑锛屼絾鏄垜浠浣曞疄鐜板憿锛熷鍚堝嚱鏁颁腑鐨勫疄鐜扮幇鍦ㄨ鎴戜滑鐪嬬湅濡備綍鍦ㄥ鍚堝嚱鏁颁腑浣跨敤閫夐」瀵硅薄鍙傛暟銆傝鎴戜滑瀵逛笂闈㈢殑useMouse鍋氫竴浜涙墿灞曪細//...};useMouse鏈韩鏄笉鐢ㄤ紶鍙傛暟鐨勶紝鎵€浠ユ垜浠洿鎺ョ粰瀹冨姞涓€涓猳ptions鍙傛暟锛岃繘琛屼竴浜涢澶栫殑閰嶇疆銆傞€氳繃瑙ｆ瀯锛屾垜浠彲浠ヨ闂墍鏈夌殑鍙€夊弬鏁帮紝骞朵负姣忎釜鍙傛暟璁剧疆涓€涓粯璁ゅ€硷紝閬垮厤浜嗕竴浜涗笉闇€瑕侀澶栭厤缃殑璋冪敤涓嶄紶鍏ュ彲閫夊弬鏁般€備笅闈㈡垜浠湅鐪媀ueUse涓婇潰鐨勪袱涓鍚堝嚱鏁版槸濡備綍浣跨敤杩欎釜妯″紡鐨勩€俈ueUse鏄疺ue3缁勫悎鍔熻兘鐨勯€氱敤宸ュ叿闆嗐€傚畠鐨勫垵琛锋槸璁╂墍鏈変笉鏀寔鍝嶅簲寮忕殑JSAPI閮藉彉鎴愬搷搴斿紡鐨勶紝鐪佸幓绋嬪簭鍛樿嚜宸卞啓鐩稿叧浠ｇ爜鐨勯夯鐑︺€傛垜浠厛鐪媢seTitle锛屽啀鐪媢seRefHistory鏄浣曞疄鐜扮殑銆備緥瀛愨€斺€攗seTitleuseTitle鐨勫姛鑳藉緢绠€鍗曪紝灏辨槸鐢ㄦ潵鏇存柊椤甸潰鐨勬爣棰樸€俢onsttitle=useTitle('InitialPageTitle');//Title:"InitialPageTitle"title.value='NewPageTitle';//Title:"NewPageTitle"瀹冭繕鏈夊嚑涓彲閫夊弬鏁帮紝浠ユ柟渚块澶栫殑鐏垫椿鎬?鎴戜滑鍙互灏唗itleTemplate浣滀负妯℃澘浼犲叆锛屽苟浣跨敤observe灏嗗叾璁剧疆涓哄彲瑙傚療鐨勶紙鐢盡utationObserver鍐呴儴瀹炵幇锛夛細consttitle=useTitle('InitialPageTitle',{titleTemplate:'>>%s<<',observe:true,});//Title:">>InitialPageTitle<<"title.value='NewPageTitle';//Title:">>NewPageTitle<<"褰撴垜浠煡鐪嬪畠鐨勬簮鐮佹椂鍙互鐪嬪埌涓嬮潰鐨勫鐞唀xportfunctionuseTitle(newTitle,options){const{document=defaultDocument,observe=false,titleTemplate='%s',}=options;//...}useTitle鍖呭惈涓€涓繀椤讳紶閫掔殑鍙傛暟鍜屼竴涓彲閫夌殑鍙傛暟瀵硅薄銆傛濡傛垜浠笂闈㈡墍鎻忚堪鐨勶紝瀹冩鏄牴鎹繖涓ā寮忔潵瀹炵幇鐨勩€傛帴涓嬫潵锛岃鎴戜滑鐪嬬湅鏇村鏉傜殑澶嶅悎鍑芥暟濡備綍浣跨敤閫夐」瀵硅薄妯″紡銆傜ず渚?useRefHistoryuseRefHistory鍙互甯姪鎴戜滑璺熻釜瀵瑰弽搴斿彉閲忕殑鎵€鏈夋洿鏀癸紝浣挎垜浠兘澶熻交鏉惧湴鎵ц鎾ゆ秷鍜屾仮澶嶆搷浣溿€?/璁剧疆璁℃暟ref骞惰窡韪畠constcount=ref(0);const{undo}=useRefHistory(count);//澧炲姞countcount.value++;//娉ㄩ攢璁℃暟锛屾挙娑堝苟鍐嶆璁板綍console.log锛堣鏁板櫒鍊硷級锛?/1鎾ら攢();鎺у埗鍙版棩蹇楋紙璁℃暟鍣ㄥ€硷級锛?/0瀹冩敮鎸佽缃緢澶氫笉鍚岀殑閰嶇疆閫夐」{deep:false,flush:'pre',capacity:-1,clone:false,//...}濡傛灉浣犳兂鐭ラ亾杩欎簺閫夐」鍙傛暟鐨勫畬鏁村垪琛ㄤ互鍙婄浉搴旂殑鍔熻兘锛屽ぇ瀹跺彲浠ユ煡闃呯浉鍏虫枃妗ｏ紝杩欓噷涓嶅啀璧樿堪銆傛垜浠彲浠ュ皢閫夐」瀵硅薄浣滀负绗簩涓弬鏁颁紶閫掞紝浠ヨ繘涓€姝ラ厤缃缁勫悎鍑芥暟鐨勮涓猴紝涓庢垜浠笂涓€涓ず渚嬬浉鍚岋細=閫夐」锛?/...}鎴戜滑鍙互鐪嬪埌鍐呴儴鍙В鏋勪簡閮ㄥ垎鍙傛暟鍊笺€傝繖鏄洜涓簎seRefHistory鍐呴儴渚濊禆浜庣粍鍚堝嚱鏁皍seManualHistory锛屽叾浠杘ption鍙傛暟鍚庨潰浼氶€忎紶缁檜seManualHistory鍋氫竴娆″睍寮€鍚堝苟銆?/...constmanualHistory=useManualRefHistory(source,{//灏嗛€夐」瀵硅薄浼犻€掔粰鍙︿竴涓彲缁勫悎...options,clone:options.clone||deep,setSource,},);//...杩欎篃鍜屾垜浠墠闈㈣鐨勪竴鑷达細缁勫悎鍑芥暟鏄彲浠ュ祵濂楃殑銆傛€荤粨鏈枃鏄€婄粍鍚堝嚱鏁版渶浣冲疄璺点€嬬殑绗竴绡囥€傛垜浠爺绌朵簡濡備綍閫氳繃閫夐」瀵硅薄鍙傛暟澧炲姞澶嶅悎鍑芥暟鐨勭伒娲绘€с€傛棤闇€鎷呭績鍙傛暟椤哄簭涓嶆纭甫鏉ョ殑闂锛岄厤缃」鍙互鐏垫椿娣诲姞鍜屾墿灞曘€傛垜浠笉浠呯爺绌朵簡妯″紡鏈韩锛岃繕瀛︿範浜嗗浣曢€氳繃VueUse涓殑useTitle鍜寀seRefHistory鏉ュ疄鐜拌繖涓ā寮忋€傚畠浠暐鏈変笉鍚岋紝浣嗘ā寮忔湰韬緢绠€鍗曪紝鎴戜滑鍙互鐢ㄥ畠鍋氱殑浜嬫儏鏄湁闄愮殑銆傚湪涓嬩竴绡囨枃绔犱腑锛屾垜浠皢浠嬬粛濡備綍閫氳繃ref鍜寀nref浣挎垜浠殑鍙傛暟鏇寸伒娲?/濡傛灉鎴戜滑缁欏畠涓€涓猺ef鎴戜滑宸茬粡鏈変簡constcountRef=ref(2);useCount(countRef);//濡傛灉鎴戜滑缁欏畠涓€涓猺ef涔熷彲浠ョ粰瀹冧竴涓暟瀛梒onstcountRef=useRef(2);杩欏鍔犱簡鐏垫椿鎬э紝骞跺厑璁告垜浠湪搴旂敤绋嬪簭涓殑鏇村鎯呭喌涓嬩娇鐢ㄦ垜浠殑缁勫悎銆?/p>
