【译文】游雨溪：Ref语法糖提案

鍓嶈█鏈€杩戯紝ref鐨勮娉曠硸寮曡捣浜嗘瀬澶х殑浜夎銆傝澶氫汉娌℃湁闃呰RFC灏辩洿鎺ユ姳鎬ㄣ€傝櫧鐒舵垜涓嶅枩娆㈣繖绉嶈娉曪紝浣嗘槸杩樻槸鏈変竴浜涙湁蹇呰澶у鐪嬬湅github涓婄殑proposal锛岀湅鐪嬪浗澶栫殑寮€鍙戣€呬竴鑸槸浠€涔堟€佸害锛屾槸涓嶆槸鍜屾垜浠寔鐩稿悓鐨勮鐐广€傛彁妗堟槸RFC228锛屼絾鏄疪FC228鍏跺疄鏄负浜嗘柟渚垮拰鍙︿竴涓彁妗堝垎寮€鏂板紑鐨勶紝鍘熸潵鐨勬彁妗堟槸RFC222锛屾渶缁堝垎瑙ｄ负RFC227鍜孯FC228锛屾墍浠ユ垜浠厛浠嶳FC222寮€濮嬬炕璇戙€傜炕璇戞父闆ㄦ邯绠€浠嬪湪鍗曟枃浠剁粍浠讹紙xxx.vue锛変腑寮曞叆浜嗕竴绉嶆柊鐨勮剼鏈被鍨嬶細馃憜涓婇潰鐨勪唬鐮佸皢缂栬瘧鎴愯繖鏍风殑馃憞锛?scriptsetup>importFoofrom'./Foo.vue'import{ref}from'vue'exportdefault{setup(){constcount=ref(1)constinc=()=>{count.value++}return{Foo,//鍗充娇娌℃湁澹版槑Foo缁勪欢锛屼篃浼氳绠椾綔椤跺眰鍙橀噺count,inc}}}ref:璇硶绯栬浠ｇ爜鏇寸畝娲?scriptsetup>//澹版槑涓€涓彉閲忥紙杩欎釜鍙橀噺浼氳缂栬瘧鎴恟ef锛塺ef:count=1functioninc(){//杩欎釜鍙橀噺鍙互鍍忔櫘閫氱殑variable鍍忛偅鏍蜂娇鐢╟ount++}//濡傛灉瑕佽幏鍙栧師濮嬪彉閲忥紝闇€瑕佸湪鍙橀噺console鍓嶅姞涓€涓煉茬鍙枫€傛棩蹇楋紙$count.value锛?lt;/script>馃憜涓婇潰鐨勪唬鐮佷細琚紪璇戞垚濡備笅馃憞锛?scriptsetup>import{ref}from'vue'exportdefault{setup(){constcount=ref(1)functioninc(){count.浠峰€?+}鎺у埗鍙般€俵og(count.value)return{count,inc}}}鍦ㄨ瘎璁轰箣鍓嶏細璇风‘淇濅綘宸查槄璇诲畬鏁寸殑RFC锛岃涓嶈绠€鍗曞湴鍥炵瓟鈥滄垜鍠滄/鎴戜笉鍠滄鈥濃€斺€旇繖涓嶄細瀵硅璁哄仛鍑烘湁鎰忎箟鐨勮础鐚€傚鏋滄彁妗堜笉璧炴垚锛岃鍦ㄥ姩鏈哄拰缂虹偣涓彁鍑虹殑瑕佺偣鑼冨洿鍐呮彁渚涘叿浣撹鎹€傝娉ㄦ剰锛屾璇硶鏄疛avaScript涓殑鏍囪璇硶銆傛垜浠彧鏄负ref:鏍囩鎻愪緵浜嗕笉鍚岀殑璇箟銆傝繖灏卞儚鍦℉TML涓紪鍐橵ue鎸囦护銆傗殸锔忚瘧鑰呮敞锛氭帴鐫€鏄珮璧炵殑鍥炲锛歽cmjason锛坹cmjason馃嚞馃嚙锛夊彧鏄竴涓剰瑙侊細鐪熺殑涓嶅枩娆㈣繖涓猧dea銆傝鍒涘缓鐨勮娉曞お澶氥€傝€屼笖瀹冧笉鍐嶆槸JavaScript銆俌ouYuxi(reply)鎴戜滑棰勬枡鍒颁綘浼氭湁杩欐牱鐨勫弽搴旓紝鎴戠煡閬撹繖鍙兘浼氬紩璧蜂簤璁紝鎵€浠ュ浜庝换浣曞叾浠栬瘎璁猴細璇风‘淇濅綘宸茬粡闃呰浜嗗畬鏁寸殑RFC锛岃涓嶈绠€鍗曞湴鍥炵瓟鈥滄垜鍠滄/鎴戜笉鈥濅笉鍠滄鈥濃€斺€斿畠瀵硅璁烘病鏈変换浣曟剰涔夈€傚鏋滄偍涓嶅悓鎰忚鎻愯锛岃鍦ㄥ姩鏈哄拰缂虹偣涓彁鍑虹殑瑙傜偣鑼冨洿鍐呮彁渚涘叿浣撹鎹€俻rivatenumber(privatenumber馃嚭馃嚫馃嚡馃嚨)缂栬瘧鍣ㄤ細鑷姩灏嗘墍鏈夊鍏ョ殑xxx.vue鏂囦欢娉ㄥ唽涓虹粍浠跺悧锛熷叿浣撴潵璇达紝鎴戝緢濂藉缂栬瘧鍣ㄥ浣曡瘑鍒粈涔堟槸Vue缁勪欢锛屼粈涔堜笉鏄疺ue缁勪欢銆傚鏋滄垜瀵煎叆涓€涓獂xx.js褰㈠紡鐨勭粍浠讹紝瀹冭繕鑳藉伐浣滃悧锛熷鏋滄垜浠娇鐢ㄩ珮闃剁粍浠讹紝鎴戜滑鍙兘涓嶅笇鏈涜繖涓鍏ョ殑楂橀樁缁勪欢琚嚜鍔ㄦ敞鍐屼负涓€涓粍浠躲€傚鏋滄垜浠娣诲姞鑷畾涔夎娉曪紝閭ｄ箞ES2021鐨別xportdefaultfromsyntax鏄惁鍙互寮哄埗鎵ц锛熸垜瑙夊緱杩欐牱鍐欏彲鑳界畝娲佹槑浜嗭細export{defaultasFoo}from'./Foo.vue';娓哥帀鐜?鍥炲)缂栬瘧鍣ㄥ彲浠ラ€氳繃setupcontext鏉ュ垽鏂€傛ā鏉跨紪璇戝櫒灏嗕粠鑴氭湰缂栬瘧涓彁鍙栫粦瀹氫俊鎭紝浠ョ‘瀹氳缁勪欢鏄惁鍙敤銆傛垜瑙夊緱寮曞叆xxx.vue骞跺簲鐢ㄩ珮绾х粍浠舵潵鍖呰９瀹冩槸闈炲父缃曡鐨勩€傚湪杩欑鎯呭喌涓嬶紝鎮ㄥ彲浠ヤ娇鐢ㄥ崟涓父瑙?script>鏍囪浠ヤ互鍓嶇殑鏂瑰紡娉ㄥ唽缁勪欢銆傚繀鍥?btoo馃嚭馃嚫)鎴戝畞鎰夸娇鐢╯velte鐨?:鑰屼笉鏄痵velte-ref:褰㈠紡銆傛偍杩樺彲浠ラ€氳繃鍦ㄥ彉閲忓悕绉板墠鍔犱笂$鏉ヤ繚鎸佸鍘熷ref鐨勮闂€傗殸锔忚瘧鑰呮敞锛歴velte鏄浗澶栧彟涓€涓祦琛岀殑妗嗘灦銆傝繖涓猵roposal鐨勭伒鎰熸潵鑷簬杩欎釜鑻楁潯鐨勫啓娉旿ohnson(johnsoncodehk馃嚟馃嚢)鈿狅笍璇戣€呮敞锛氭浜轰笉鏄珮璧?馃憤)锛岃€屾槸楂樿俯(馃憥)锛屽ぇ瀹剁湅鐪嬩笉瑕佸厜鐪嬪ソ璇勶紝楂樻涔熷緢鏈夋剰鎬?:+let/const杩欑鍐欐硶鎬庝箞鏍凤紵鍍忚繖鏍凤細$:letfoo=1//Thisvariablerepresentsref$:constbar=foo+1//Thisvariablerepresentscomputed$:letbaz=computed(()=>bar+1)鐒跺悗灏嗚缂栬瘧涓鸿繖鏍凤細const$foo=ref(1)letfoo=unref($foo)const$bar=computed(()=>foo+1)constbar=unref($bar)const$baz=ref(computed(()=>bar+1))letbaz=unref($baz)鎰熻澶у閮戒笉鎯宠劚绂籮s鐨勮涔夛紝褰撶劧鎴戜滑鍙互鏈変竴涓畬鍏ㄥ熀浜巎s璇箟鐨勬柟娉曪紝浣嗘槸杩欏氨鏄垜浠瑆ant:import{noValueRef,noValueComputed}from'vue'letfoo=noValueRef(1)//TS绫诲瀷锛歯umber&{raw:Ref}constbar=noValueComputed(()=>foo+1)//TStype:number&{raw:ComputedRef}useNum(bar.raw)functionuseNum(num:Ref)鐒跺悗浼氳缂栬瘧鎴愯繖鏍凤細import{ref,computed}from'vue'letfoo=ref(1)constbar=computed(()=>foo.value+1)useNum(bar)functionuseNum(num:Ref)鍠滄灏辩偣璧?馃憤)锛屼笉鍠滄灏辩偣璧?馃憥)ikeit鈿狅笍璇戣€呮敞锛氫笂闈㈣繖鍙ヨ瘽鏄粬璇寸殑锛屼笉鏄垜璇寸殑銆傛灉鐒朵簹娲蹭汉閮藉枩娆㈢帺杩欎釜RobbinBaauw馃嚦馃嚤杩欎釜RFC鐨勭己鐐癸紙鏈韩涔熸槸涓€涓己鐐癸紝浣嗙幇鍦ㄨ秺鏉ヨ秺绯燂級鏄彲浠ラ€夋嫨缂栧啓寰堝鐩稿悓鐨勪笢瑗匡紝鏈夌粡楠岀殑Vue寮€鍙戜汉鍛橈紙渚嬪璇勮鐨勪汉锛夊湪杩欎釜RFC涓婏級鐭ラ亾鎵€鏈夌殑閫夐」锛屽畠浠箣闂寸殑鍏崇郴绛夌瓑锛屼絾鏄浜庡ぇ澶氭暟Vue寮€鍙戜汉鍛樻潵璇达紝鎯呭喌骞堕潪濡傛銆傚湪Vue2涓紝鍙湁OptionsAPI锛屾垜浠渶缁堜細寰楀埌涓€涓被浼肩被鐨勭粍浠躲€備絾鏄鏋滀娇鐢ㄨ繖涓猂FC锛屾垜浠皢闈复浠ヤ笅閫夋嫨锛歄ptionsAPIClassAPI锛堥渶瑕佹彃浠讹級CompositionAPI锛坴ue2鍜寁ue3鍐欐硶涓嶅悓锛塡withref:syntacticsugar\no鏈変簡璇硶绯栵紝杩欎細璁╃敤鎴风兢闈炲父鍒嗘暎锛屽浜庡垵瀛﹁€呭拰鏈夐€夋嫨鍥伴毦鐥囩殑浜烘潵璇村お闅句簡銆傚鏋滀綘鍙渶瑕佽浣忥細鈥滃鏋滀綘鎯冲搷搴斿紡锛屼娇鐢∣ptionsAPI锛岄€昏緫閲嶇敤浣跨敤CompositionAPI鈥濓紝閭ｄ箞灏变細绠€鍗曞緢澶氥€備絾鏄剧劧锛屾湁涓嶅皯浜哄枩娆㈣繖绉嶁€滅濂団€濈殑璇硶銆傚鏋滄湁浜烘彁鍑鸿嚜瀹氫箟璇硶锛屼篃璁镐粬浠皢鏉ヤ細鎯宠鎵╁睍璇硶銆傝兘鍚﹀湪Vue浠ュ鐨勭涓夋柟搴撲腑瀹炵幇锛熷鏋滆繖鏄疺ue鐨勬牳蹇冭娉曪紝閭ｄ箞鏈潵鎵€鏈夌殑Vue鐗堟湰閮介渶瑕佹敮鎸佸畠銆傛垜瑙夊緱杩欎釜$寰堣糠鎯戯細濡傛灉涓嶅畬鍏ㄧ悊瑙?鍓嶇紑鐨勪笂涓嬫枃锛屾垜瑙夊緱浼氬緢杩锋儜锛佹崲鍙ヨ瘽璇达紝浣犻渶瑕佺煡閬撹繖涓笢瑗挎槸涓€涓猺ef鐨勫疄闄呭€硷紝浣犺繕闇€瑕佺煡閬撲綘姝ｅ湪澶勭悊涓€涓娉曞姞绯栫殑ref锛屽湪杩欑鎯呭喌涓嬮渶瑕佷互$涓哄墠缂€锛岃€屽湪鍏朵粬鎯呭喌涓嬶紝涓嶉渶瑕佸墠缂€銆傛垜鍧氫俊杩欎細缁欒澶氱敤鎴峰甫鏉ュ緢澶氶棶棰樸€傛父鐜夌幒锛堢瓟锛変綘璇寸殑澶じ寮犱簡銆侰lassAPI鏄竴涓畼鏂规彃浠讹紝浣嗗彧鏄竴涓彃浠躲€備笉鏄牳蹇傾PI鐨勪竴閮ㄥ垎锛屽彧瀵圭壒鍒枩娆lass鐨勭敤鎴锋湁鍚稿紩鍔涖€傛崲鍙ヨ瘽璇达紝瀹冧笉鏄€滀富娴佲€濄€傗殸锔忚瘧鑰呮敞锛氬鏋滀笉鏄富娴侊紝閭ｄ笉鏄潪涓绘祦鍚楋紵vue2鍜寁ue3鐨凜ompositionAPI鐨勭洰鐨勬槸鐩稿悓鐨勶紝鑰屼笖澶у鏁帮紙濡傛灉涓嶆槸鍏ㄩ儴锛変唬鐮佺湅璧锋潵鏄竴鏍风殑銆傚井灏忕殑鎶€鏈樊寮備笉绠椾綔鈥滃仛鍚屼竴浠朵簨鐨勪袱绉嶆柟寮忊€濄€?scriptsetup>濡俁FC涓墍寤鸿锛岀紪鍐欎笉甯﹁娉曠硸鐨凜ompositionAPI浠ｇ爜涓庢甯哥殑CompositionAPI浣跨敤100%鐩稿悓锛堥櫎浜嗘棤闇€鎵嬪姩杩斿洖鎵€鏈夊唴瀹癸級銆備簨瀹炰笂锛屽鏋滅敤鎴锋鍦ㄤ娇鐢╞ut-file缁勪欢锛屾垜鐪熺殑鐪嬩笉鍑轰笉浣跨敤鏂扮殑鐨勭悊鐢憋紝鍥犱负鍓嶈€呮€绘槸闇€瑕佹洿灏戠殑浠ｇ爜銆備綘涓嶈寰楄繖鏍峰啓鏇村ソ鍚楋細exportdefault{components:{...},setup(){...}}ref:杩欐槸绾补鐨勮娉曠硸銆傚畠涓嶄細鏀瑰彉CompositionAPI鍦?scriptsetup>涓殑宸ヤ綔鏂瑰紡銆傚鏋滄偍宸茬粡鐞嗚ВCompositionAPI锛岀悊瑙ef:璇硶绯栫殑鏃堕棿涓嶄細瓒呰繃10鍒嗛挓銆傛€昏€岃█涔?鏈変袱涓€滆寖渚嬧€濓細(1)OptionsAPI(2)CompositionAPI鍜宺ef:syntacticsugar涓嶆槸涓嶅悓鐨凙PI鎴栬寖渚嬨€傚畠浠彧鏄疌ompositionAPI鐨勬墿灞曪紝鐢ㄦ洿灏戠殑浠ｇ爜琛ㄨ揪鐩稿悓鐨勯€昏緫銆傦紙寮曠敤Robin鍒氭墠鐨勮瘽锛夛細濡傛灉鏈変汉鎻愬嚭鑷畾涔夎娉曪紝璇翠笉瀹氫互鍚庝細鎯虫墿灞曡繖涓娉曘€傝兘鍚﹀湪Vue浠ュ鐨勭涓夋柟搴撲腑瀹炵幇锛熸墍浠ワ紝浣犱篃璁ゅ悓寰堝浜烘兂鐢╮ef:璇硶绯栵紝浣嗘槸寤鸿Vue涓嶆敮鎸侊紝鍙嶈€岄紦鍔卞悇绉嶇涓夋柟搴撳疄鐜拌嚜宸辩殑璇硶銆傝繖涓嶄細瀵艰嚧鏇村鐨勭鐗囧寲鍚楋紵鎯虫兂React鐢熸€佺郴缁熶腑鐨凜SS-in-JS銆傦紙寮曠敤Robin鍒氭墠鐨勮瘽锛夛細鎴戣寰楄繖涓?寰堣糠鎯戯細濡傛灉涓嶅畬鍏ㄧ悊瑙?鍓嶇紑鐨勪笂涓嬫枃锛屾垜瑙夊緱浼氬緢杩锋儜锛佹崲鍙ヨ瘽璇达紝浣犻渶瑕佺煡閬撹繖涓笢瑗挎槸涓€涓猺ef鐨勫疄闄呭€硷紝浣犺繕闇€瑕佺煡閬撲綘姝ｅ湪澶勭悊涓€涓娉曞姞绯栫殑ref锛屽湪杩欑鎯呭喌涓嬮渶瑕佷互$涓哄墠缂€锛岃€屽湪鍏朵粬鎯呭喌涓嬶紝涓嶉渶瑕佸墠缂€銆傛垜鍧氫俊杩欎細缁欒澶氱敤鎴峰甫鏉ュ緢澶氶棶棰樸€?$foo瀹為檯涓婁唬琛╢oo锛屽氨鍍廸oo浠ｈ〃foo.value涓€鏍枫€傜湡鐨勯偅涔堟贩涔卞悧锛熻繖浼氬鑷翠粈涔堝叿浣撶殑鍏蜂綋闂锛熷繕璁颁簡$鏄粈涔堟椂鍊欐坊鍔犵殑锛熻娉ㄦ剰锛屽嵆浣挎病鏈夎娉曠硸锛屾垜浠篃浼氬繕璁颁綍鏃朵娇鐢?value锛岃繖鏇存湁鍙兘鍙戠敓銆傛偍瑕佹眰鐢ㄦ埛鏀惧純CompositionAPI鐨勫ソ澶勶紝鍥犱负鎮ㄤ笉鍠滄鍙互浣緾ompositionAPI涓嶉偅涔堝啑闀跨殑璇硶绯栥€傛垜鐪熺殑涓嶈涓鸿繖鏄湁閬撶悊鐨勩€侺inusBorg(LinusBorg馃嚛馃嚜)濡傛灉鐜板湪灏嗛《绾у彉閲忕洿鎺ユ毚闇茬粰