鍓嶈█澶у濂斤紝鎴戞槸webfansplz銆傞鍏堬紝鎴戞兂鍜屽ぇ瀹跺垎浜竴涓ソ娑堟伅銆傛垜鍔犲叆浜哣ueUse鍥㈤槦銆傛劅璋antfu鐨勯個璇枫€傛垜寰堥珮鍏存垚涓哄洟闃熺殑涓€鍛樸€備粖澶╁氨鍜屽ぇ瀹惰亰涓€鑱奦ueUse鐨勮璁′笌瀹炵幇銆備粙缁嶇粰澶у鐭ラ亾锛孷ue3寮曞叆浜嗙粍鍚圓PI锛屽ぇ澶ф彁楂樹簡閫昏緫澶嶇敤鑳藉姏銆俈ueUse鍩轰簬缁勫悎鐨凙PI瀹炵幇浜嗗緢澶氱畝鍗曟槗鐢ㄣ€佸疄鐢ㄦ湁瓒ｇ殑鍔熻兘銆備緥濡傦細useMagicKeysuseMagicKeys鐩戞帶鎸夐敭鐘舵€侊紝鎻愪緵缁勫悎鐑敭鐨勫姛鑳斤紝闈炲父绁炲鏈夎叮銆備娇鐢ㄥ畠锛屾垜浠彲浠ュ緢鏂逛究鍦扮洃鎺ф垜浠娇鐢–V鏂规硶鐨勬鏁帮細锛塽seScrolluseScroll鎻愪緵浜嗕竴浜涘搷搴斿紡鐨勭姸鎬佸拰鍊硷紝姣斿婊氬姩鐘舵€併€佸埌杈剧姸鎬併€佹粴鍔ㄦ柟鍚戝拰褰撳墠婊氬姩浣嶇疆銆倁seElementByPointuseElementByPoint鐢ㄤ簬瀹炴椂鑾峰彇褰撳墠鍧愭爣浣嶇疆鏈€椤剁鐨勫厓绱犮€傞€氳繃useMouse锛屾垜浠彲浠ュ仛涓€浜涙湁瓒ｇ殑浜や簰鍜屾晥鏋溿€俇serexperienceUserexperienceVueUse鏃犺鏄鐢ㄦ埛杩樻槸瀵瑰紑鍙戣€咃紝閮藉彇寰椾簡寰堝ソ鐨勭敤鎴蜂綋楠屻€傚厛鏉ョ湅鐪嬩娇鐢ㄦ劅鍙楋細寮虹被鍨嬫敮鎸乂ueUse鏄敤TypeScript鍐欑殑锛屾湁瀹屾暣鐨凾S鏂囨。锛屾湁寰堝ソ鐨凾S鏀寔鑳藉姏銆係SR鏀寔鎴戜滑瀵筍SR鏈夊弸濂界殑鏀寔锛屽彲浠ュ緢濂界殑娓叉煋鏈嶅姟绔殑鍦烘櫙Good銆侲aseofuse瀵逛簬涓€浜涙敮鎸佷紶鍏ラ厤缃€夐」鐨勫姛鑳斤紝鎴戜滑浼氫负鐢ㄦ埛鎻愪緵涓€缁勫父鐢ㄧ殑榛樿閫夐」锛屽彲浠ヤ繚璇佺敤鎴峰湪澶у鏁板簲鐢ㄥ満鏅笅涓嶉渶瑕佽繃澶氬叧娉ㄤ綘鐨勫姛鑳藉疄鐜板拰缁嗚妭銆備互useScroll涓轰緥锛?scriptsetuplang="ts">import{useScroll}from'@vueuse/core'constel=ref()//浼犲叆婊氬姩鍏冪礌灏卞彲浠ュ伐浣渃onst{x,y}=useScroll(el)//鑺傛祦鏀寔閫夐」const{x,y}=useScroll(el,{throttle:200})useScroll涓轰竴浜涘鎬ц兘鏈夎姹傜殑寮€鍙戣€呮彁渚涗簡涓€涓妭娴侀€夐」銆備絾鏄垜浠笇鏈涚殑鏄敤鎴峰彧鏈夊湪鏈夐渶姹傜殑鏃跺€欐墠鍏虫敞杩欎釜閰嶇疆锛屽洜涓哄綋閰嶇疆鍙傛暟寰堝鐨勬椂鍊欙紝鐞嗚В鍙傛暟鐨勫惈涔夊拰閰嶇疆鍏跺疄鏄竴绉嶅績鐞嗚礋鎷呫€傚彟澶栵紝閫氱敤鐨勯粯璁ら厤缃叾瀹炴槸寮€绠卞嵆鐢ㄨ兘鍔涚殑涓€涓綋鐜帮紒浣跨敤鏂囨。浣跨敤鏂囨。锛屾垜浠彁渚涗氦浜掑紡Demo鍜岀畝鍖栫殑浣跨敤銆傜敤鎴峰彲浠ラ€氳繃璇曠帺Demo浜嗚В鏇村鍔熻兘锛屼篃鍙互閫氳繃CV澶ф硶澶嶅埗Usage杞绘澗浣跨敤鍔熻兘銆傜湡棣欙紒鍏煎鎬ф垜浠墠闈㈡彁鍒癡ue3寮曞叆浜嗙粍鍚圓PI鐨勬蹇碉紝浣嗘槸寰楃泭浜巆omposition-api鎻掍欢鐨勫疄鐜帮紝鎴戜滑涔熷彲浠ュ湪Vue2椤圭洰涓娇鐢ㄧ粍鍚圓PI銆備负浜嗚鏇村鐨勭敤鎴蜂娇鐢╒ueUse锛孉nthonyFu瀹炵幇浜唙ue-demi锛屽垽鏂敤鎴风殑瀹夎鐜锛圴ue2椤圭洰鍙傝€僣omposition-api鎻掍欢锛孷ue3椤圭洰鍙傝€冨畼鏂瑰寘锛夛紝璁￢ue2鐢ㄦ埛杩樺彲浠ョ敤VueUse锛屼笉閿欙紒寮€鍙戣€呬綋楠岀洰褰曠粨鏋勫熀浜嶮onorepo锛岄」鐩噰鐢ㄦ墎骞崇洰褰曠粨鏋勩€傛柟渚垮紑鍙戣€呮煡鎵惧搴旂殑鍔熻兘銆傛垜浠负姣忎釜鍔熻兘鐨勫疄鐜伴兘鍒涘缓浜嗕竴涓嫭绔嬬殑鏂囦欢澶癸紝杩欐牱寮€鍙戣€呭湪淇bug鍜屾坊鍔犳柊鍔熻兘鏃讹紝鍙渶瑕佸叧娉ㄨ繖涓枃浠跺す涓叿浣撳姛鑳界殑瀹炵幇锛岃€屼笉蹇呭叧娉ㄩ」鐩湰韬殑瀹炴柦缁嗚妭锛屽ぇ澶ч檷浣庝簡涓婃墜鎴愭湰銆侱emo鍜屾枃妗ｇ殑缂栧啓涔熸槸鍦ㄨ繖涓枃浠跺す涓嬪畬鎴愮殑锛岄伩鍏嶄簡鍙嶅涓婁笅璺宠浆瀵绘壘鐩綍缁撴瀯鏂囦欢鐨勭碂绯曠爺鍙戜綋楠屻€傛垜浠彁渚涗簡闈炲父璇︾粏鐨勮础鐚寚鍗楄础鐚寚鍗楀府鍔╂兂瑕佽础鐚殑寮€鍙戣€呭揩閫熶笂鎵嬶紝骞剁紪鍐欎簡涓€浜涜嚜鍔ㄥ寲鐨勮剼鏈潵甯姪寮€鍙戣€呴伩鍏嶄竴浜涙墜宸ュ伐浣溿€俛tomicCSS椤圭洰閲囩敤atomicCSS浣滀负CSS缂栧啓鏂规锛屼釜浜鸿涓篴tomicCSS鍙互甯姪鎴戜滑蹇€熺紪鍐檇emodemo锛岃€屼笖鍚勪釜鍔熻兘鐨刣emo閮芥槸鐙珛鏃犺€﹀悎鐨勶紝涓嶄細鏈夋娊璞″鐢ㄧ殑绮剧璐熸媴銆傝璁℃€濊矾ComposablefunctionsComposablefunctions绠€鍗曠殑璇村氨鏄嚱鏁板彲浠ュ缓绔嬩竴绉嶇粍鍚堝叧绯伙紝渚嬪Example:useScroll鐨勫疄鐜扮粨鍚堜簡涓変釜鍑芥暟锛屽皢鍗曚竴鑱岃矗鐨勫嚱鏁扮粍鍚堟垚鍙︿竴涓嚱鏁帮紝瀹炵幇閫昏緫澶嶇敤鐨勮兘鍔涖€傛垜鎯宠繖灏辨槸缁勫悎鍔熻兘鐨勯瓍鍔涙墍鍦ㄣ€傚綋鐒讹紝姣忎釜鍔熻兘涔熷彲浠ョ嫭绔嬩娇鐢紝鐢ㄦ埛鍙互鏍规嵁鑷繁鐨勯渶瑕佽繘琛岄€夋嫨銆傚紑鍙戜汉鍛樺湪澶勭悊鍔熻兘鍑芥暟鏃跺彲浠ュ疄鐜版洿濂界殑鍏虫敞鐐瑰垎绂汇€傛瘮濡傚湪澶勭悊useScroll鐨勬椂鍊欙紝鎴戜滑鍙渶瑕佸叧娉ㄦ粴鍔ㄥ姛鑳界殑瀹炵幇锛屼笉闇€瑕佸叧娉ㄩ槻鎶栬妭娴佸拰浜嬩欢缁戝畾鐨勫唴閮ㄩ€昏緫鍜屽疄鐜般€傚缓绔嬧€滆繛鎺モ€滱nthonyFu鍦╒ueConf2021鍒嗕韩浜嗚繖鏍蜂竴涓ā寮忥細寤虹珛杈撳叆->杈撳嚭閾炬帴杈撳嚭浼氭牴鎹垜浠墍澶勮緭鍏ョ殑鍙樺寲鑷姩鏀瑰彉鍦ㄧ紪鍐欏彲缁勫悎鍑芥暟鏃跺垱寤烘暟鎹拰閫昏緫涔嬮棿鐨勮繛鎺ワ紝杩欐牱鎴戜滑灏变笉蹇呭叧蹇冨浣曚互鍙婁綍鏃舵洿鏂版暟鎹€備緥濡傦細<鑴氭湰setuplang="ts">import{ref}from'vue'import{useDateFormat,useNow}from'@vueuse/core'constnow=useNow()//杩斿洖涓€涓猺ef鍊糲onstformatted=useDateFormat(now)//灏嗘暟鎹緭鍏ュ拰閫昏緫杩炴帴//useDateFormatimplementsfunctionuseDateFormat(date,formatStr='HH:mm:ss'){returncomputed(()=>formatDate(normalizeDate(unref(date)),unref(formatStr)))}浠庝笂闈㈢殑渚嬪瓙鎴戜滑鍙互鐪嬪嚭useDateFormat浣跨敤璁＄畻灞炴€у皢杈撳叆鍖呰鍦ㄥ唴閮ㄩ€昏緫涓紝杩欐牱鎴戜滑灏卞彲浠ヨ杈撳嚭鏍规嵁杈撳叆鑷姩鍙樺寲锛岀敤鎴峰彧闇€瑕佷紶鍏ヤ竴涓猂esponsive鍊?鏃犻渶鍏虫敞鍏蜂綋鐨勬洿鏂伴€昏緫銆備娇鐢╮ef鑰屼笉鏄痳eactiveref鍜宺eactive鍚勬湁浼樼己鐐广€傝繖閲屾垜涓昏浠庣敤鎴风殑瑙掑害璇磋鎴戜釜浜虹殑鐪嬫硶锛?/reactivefunctionuseScroll(element){constposition=reactive({x:0,y:0});//impl...return{position,...}}//瑙ｆ瀯澶卞幓鍝嶅簲鎬onst{position}=useScroll(element)//鐢ㄦ埛闇€瑕佹墜鍔╰oRefs鏉ヤ繚鎸佸搷搴旀€onst{x,y}=toRefs(position)//reffunctionuseScroll(element){constx=ref(0);甯搁噺y=ref(0);//impl...return{x,y,...}}//涓嶄細澶卞幓鍝嶅簲鑳藉姏锛岀敤鎴峰彲浠ョ洿鎺ヤ娇鐢ㄥ畠鏉ユ覆鏌擄紝watch..const{x,y}=useScroll(element)鏉ヨ嚜涓婇潰鐨勪緥瀛愶紝鎴戜滑鍙互鐪嬪埌锛屽鏋滄垜浠娇鐢╮eactive锛岀敤鎴烽渶瑕佽€冭檻Destructuring浼氬け鍘诲搷搴旀€х殑闂锛岃繖涔熸槸鏉ヨ嚜鍦ㄤ竴瀹氱▼搴︿笂闄愬埗浜嗙敤鎴蜂娇鐢ㄨВ鏋勭殑鑷敱搴︼紝闄嶄綆浜嗚鍔熻兘鐨勬槗鐢ㄦ€с€傛湁浜涗汉鍙兘浼氭姳鎬ㄤ娇鐢?valueofref銆傚叾瀹炲湪澶у鏁版儏鍐典笅锛屾垜浠彲浠ラ€氳繃涓€浜涙妧宸ф潵鍑忓皯瀹冪殑浣跨敤锛歶nrefAPIconstx=ref(0)console.log(unref(x))//0usesreactivetounpackrefconstx=ref(0)consty=ref(0)constposition=reactive({x,y})console.log(position.x,position.y)//00ReactivityTransform鍦ㄥ疄楠岄樁娈?scriptsetup>letcount=$ref(0)count++鍦ㄥ疄鐜板姛鑳芥椂浣跨敤options瀵硅薄浣滀负鍙傛暟锛屽鏋滄湁options鍙傛暟鍦烘櫙锛屾垜浠€氬父寤鸿寮€鍙戣€呬娇鐢ㄥ璞′綔涓鸿緭鍏ュ弬鏁帮紝渚嬪锛?/goodfunctionuseScroll(element,{throttle,onScroll,...}){...}//badfunctionuseScroll(element,throttle,onScroll,....){...}鍙互寰堟槑鏄剧殑鐪嬪嚭涓よ€呯殑鍖哄埆銆傛鏃犵枒闂紝绗竴绉嶅啓娉曠殑鍙墿灞曟€т細鏇撮珮锛屽湪鍚庣画鐨勮凯浠ｄ腑涔熶笉瀹规槗鏀规銆傝鍔熻兘鏈韩浼氬鑷翠竴浜涚牬鍧忔€х殑鍙樺寲銆傛枃妗ｅ疄鐜颁笉浼氳缁嗚鏄庡姛鑳界殑鍏蜂綋瀹炵幇銆傛瘯绔熸垜浠湁200涓箣澶氾紝杩欓噷缁欏ぇ瀹跺垎浜竴涓媀ueUse鏋勫缓鏂囨。閮ㄥ垎姣旇緝鏈夋剰鎬濈殑瀹炵幇銆傛垜璁や负鍋氬緱寰堝ソ銆備紵澶х殑銆傛枃妗ｆ瀯鎴愬厛鏉ョ湅涓嬪姛鑳芥枃妗ｇ殑缁勬垚閮ㄥ垎锛氭瀯寤鸿繃绋媀ueUse浣跨敤VitePress浣滀负鏂囨。鏋勫缓宸ュ叿銆傝鎴戜滑鐪嬬湅鏇存湁瓒ｇ殑閮ㄥ垎锛氫互packages鏂囦欢澶逛綔涓哄叆鍙ｇ偣鍚姩VitePress鏈嶅姟銆俈itePress浣跨敤鐨勬槸Conventional璺敱锛堟枃浠舵槸璺敱锛夛紝鎵€浠ヨ闂甴ttp://xxx.com/core/onClickOutside瀹為檯涓婁細瑙ｆ瀽鎴戜滑瀵瑰簲鐨刬ndex.md鏂囦欢銆傜湅鍒拌繖閲屽ぇ瀹惰偗瀹氫細鏈夌枒闂紝鍦╥ndex.md鏂囦欢涓彧鍖呭惈usage锛屽叾浠栦俊鎭粠浣曡€屾潵锛熸湁鎰忔€濈殑閮ㄥ垎鏉ヤ簡~鍐橵ite鎻掍欢MarkdownTransform澶勭悊Markdown鏂囦欢锛歟xportfunctionMarkdownTransform():Plugin{return{name:'vueuse-md-transform',enforce:'pre',asynctransform(code,id){if(!id.endsWith('.md'))returnnullconst[pkg,name,i]=id.split('/').slice(-3)if(functionNames.includes(name)&&i==='index.md'){//澶勭悊index.md//閫氳繃杩炴帴瀛楃涓叉潵杩炴帴Demo銆佺被鍨嬪０鏄庛€佽础鐚€呬俊鎭拰鏇存柊鏃ュ織header)code=code.slice(0,sliceIndex)+header+code.slice(sliceIndex)}returncode},}}閫氳繃杩欎釜Vite鎻掍欢鐨勫鐞嗭紝鎴戜滑鐨勬枃妗ｉ儴鍒嗗氨瀹屾垚浜嗐€傝繖閲岃繕鏈変竴涓棶棰橈紝璐＄尞鑰呯殑鏁版嵁鍜屾洿鏂版棩蹇楁暟鎹槸鎬庝箞鏉ョ殑锛熻繖涓や釜鏁版嵁鐨勫鐞嗘柟寮忕浉鍚岋紝鎵€浠ユ垜灏嗕娇鐢ㄥ叾涓竴涓潵璇存槑瀹炵幇锛歡etgitsubmitterinformationimportGitfrom'simple-git'exportasyncfunctiongetContributorsAt(path:string){constlist=(awaitgit.raw(['log','--pretty=format:"%an|%ae"','--',path])).split('\n').map(i=>i.slice(1,-1).split('|')as[string,string])returnlist}鎴戜滑閫氳繃simple-git鎻掍欢璇诲彇鐩稿叧鏂囦欢鎻愪氦鑰呯殑淇℃伅銆傛垜浠湁浜嗘暟鎹箣鍚庯紝閭ｄ箞鎴戜滑濡備綍灏嗗畠浠覆鏌撳埌椤甸潰涓憿锛熻繕鏄娇鐢╒ite鎻掍欢锛屼笉杩囪繖娆℃垜浠渶瑕佸仛鐨勬槸娉ㄥ唽铏氭嫙妯″潡銆傛敞鍐岃櫄鎷熸ā鍧梒onstID='/virtual-contributors'exportfunctionContributors(data:Record):Plugin{return{name:'vueuse-contributors',resolveId(id){returnid===韬唤璇侊紵ID:null},load(id){if(id!==ID)returnnullreturn`exportdefault${JSON.stringify(data)}`},}}娉ㄥ唽virtual鏃朵紶鍏ユ垜浠垰鍒氳幏鍙栫殑鏁版嵁鍗冲彲妯″潡锛岀劧鍚庢垜浠彲浠ュ湪缁勪欢涓紩鍏ヨ櫄鎷熸ā鍧楁潵澶勭悊鏁版嵁銆?{fn:string}>()constcontributors=computed(()=>_contributors[props.fn]||[])鎷垮埌鏁版嵁鍚庯紝鎴戜滑灏卞彲浠ユ覆鏌撻〉闈簡銆傝繖鏄枃妗ｄ腑Contributors鍜孋hangelog閮ㄥ垎鐨勫疄鐜板師鐞嗐€傛潵鐪嬬湅鏁堟灉锛氱湅瀹屾槸涓嶆槸瑙夊緱杩欎釜鎸烘湁鎰忔€濈殑锛烿ite鎻掍欢鍏跺疄鍙互鐢ㄦ潵鍋氬緢澶氫簨鎯呫€俈8.0鏉ュ暒馃帀鍓嶄袱澶╂垜浠寮忓彂甯冧簡V8.0锛屼富瑕佸甫鏉ワ細閮ㄥ垎鍑芥暟鐨勫懡鍚嶈鑼冨寲鍒悕鍖栦负涓轰簡鍏煎鎬э紝娣诲姞浜嗗嚑涓柊鍔熻兘銆傜洰鍓嶅嚱鏁版暟閲忓凡缁忚揪鍒?00+@vueuse/core/nuxt=>@vueuse/nuxt宸茬粡涓洪儴鍒嗗嚱鏁版彁渚涗簡鎸囦护鏀寔銆傛杩庝娇鐢ㄧ粨璇€傛渶鍚庢劅璋nthonyFu鐟炴柉鐧藉鏈枃鐨勪慨鏀瑰拰寤鸿锛佸鏋滄垜鐨勬枃绔犲浣犳湁甯姪锛岃鍏虫敞鎴戯紝涓€璧峰涔犮€?/p>
