浣滆€咃細MattMaribojoc蹇冩€佷汉銆傛湰鏂囧凡鏀跺綍鍒癎itHubhttps://github.com/qq44924588...锛屾枃绔犲凡鍒嗙被锛屼篃鏁寸悊浜嗗緢澶氭垜鐨勬枃妗ｅ拰鏁欑▼璧勬枡銆傚墠绔紑鍙戝伐绋嬪笀蹇呰鐨勪功绫嶆湁鍝簺锛烿ue鏄洰鍓嶅墠娌垮紑鍙戜腑鏈€鐑棬鐨勬鏋朵箣涓€锛?019骞存瘡鍛ㄤ笅杞介噺缈讳簡涓€鐣€?020骞村垵Vue3鐨勫彂甯冧篃灏嗗鍔犲叾鍙楁杩庣▼搴︺€俈ue3涓哄紑鍙戜汉鍛樻彁渚涗簡鏇村鎺у埗鏉冿紝瀹冨厑璁告垜浠簿纭帶鍒堕」鐩腑鍙戠敓鐨勪簨鎯咃紝浠庣紪鍐欒嚜瀹氫箟缂栬瘧鍜屾覆鏌撴柟娉曞埌鐩存帴浣跨敤Vue鍙嶅簲鎬PI銆俈ue3浣跨敤Proxy鏉ョ洃鎺ф暟鎹彉鍖栥€傚搷搴斿紡鏄疺ueJS鐨勬牳蹇冦€傛暟鎹繀椤绘槸鐩稿叧鐨勶紝骞朵笖鍙互瑙傚療鍜屾洿鏂颁互鍝嶅簲浠讳綍鍙樺寲銆俈ue2浣跨敤Object.defineProperty鍒涘缓getter鍜宻etter鏉ュ疄鐜板搷搴斿紡銆備娇鐢∣bject.defineProperty涓昏鏈変袱涓棶棰橈紝瀹樻柟鏂囨。涓湁鎻愬埌锛歏ue鏃犳硶妫€娴嬪埌鏁扮粍鍜屽璞＄殑鍙樺寲銆傚浜庡璞★紝Vue鏃犳硶妫€娴嬪睘鎬х殑娣诲姞鎴栧垹闄ゃ€傜敱浜嶸ue鍦ㄥ垵濮嬪寲瀹炰緥鏃朵細瀵瑰睘鎬ц繘琛実etter/setter杞崲锛屽洜姝よ灞炴€у繀椤诲瓨鍦ㄤ簬鏁版嵁瀵硅薄涓婏紝Vue鎵嶈兘灏嗗叾杞崲涓哄搷搴斿紡銆傚浜庢暟缁勶紝Vue鏃犳硶妫€娴嬪埌浠ヤ笅鏁扮粍鐨勫彉鍖栵細褰撲綘浣跨敤绱㈠紩鐩存帴璁剧疆鏁扮粍椤规椂锛屼緥濡傦細vm.items[indexOfItem]=newValue褰撲綘淇敼鏁扮粍鐨勯暱搴︽椂锛屼緥濡傦細vm.items.length=newLength渚嬪渚嬪瓙锛歷arvm=newVue({data:{items:['a','b','c']}})vm.items[1]='x'//娌℃湁鍝嶅簲vm.椤圭洰銆俵ength=2//娌℃湁鍝嶅簲涓轰粈涔堣浣跨敤Proxy锛烿ue3鐨勮В鍐虫柟妗堟槸浣跨敤鍩轰簬Proxy鐨勮瀵熻€呮ā寮忔潵瑙ｅ喅Vue2鍝嶅簲鐨勪竴浜涢檺鍒躲€傛柊鏃х郴缁熺殑涓昏鍖哄埆鍦ㄤ簬锛屽湪Vue2涓紝Object.defineProperty淇敼浜嗗師濮嬫暟鎹紝鑰孭roxy鍒欐病鏈夛紝Proxy灏嗙洰鏍囨暟鎹櫄鎷熷寲骞惰缃簡涓嶅悓鐨刪andlers锛堢О涓簍argets锛夛紝閫氳繃getters鍜宻etters杩涜鎷︽埅鏁版嵁銆倂ue3鎰忓懗鐫€鎴戜滑涓嶉渶瑕佷娇鐢╲m.$set璁╂暟鎹姩鎬佸搷搴旓紝鍚屾椂涔熻В鍐充簡vue2鎿嶄綔鏁扮粍鏃犳硶鍝嶅簲鐨勯棶棰樸€俌ouYuxi鎬荤粨锛屽熀浜巃gent鍙互鏀寔锛氭娴嬪睘鎬у鍒犳娴嬫暟缁勭储寮?闀垮害鍙樺寲鏀寔Map銆丼et銆乄eakMap鍜學eakSetCompositionAPI杩欐槸Vue3鐩墠鏈€澶х殑鍙樺寲锛屾湁鍔╀簬浠ｇ爜缁勭粐鍜屽鐢?鐩墠锛屽湪Vue涓垜浠娇鐢∣ptionsAPI銆侽ptionsAPI鎸夊睘鎬х粍缁囦唬鐮侊細data銆乧omputed銆乵ethods绛夈€傝繖鏄竴绉嶉潪甯哥洿瑙傜殑鏂瑰紡锛屼絾缁存姢涓€浜涘鏉傜殑缁勪欢浼氬彉寰楅潪甯稿洶闅俱€傚崟涓嚱鏁扮殑浠ｇ爜缁忓父琚姏鍦ㄧ浉闅旀暟鐧捐鐨勫涓湴鏂广€傚彲缁存姢鎬у拰鍙鎬ф垚涓轰富瑕佸叧娉ㄧ偣銆傛帴涓嬫潵锛岃鎴戜滑蹇€熶簡瑙ｄ竴涓婥ompositionAPI鐨勫伐浣滃師鐞嗐€俰mport{reactive,computed}from'vue'exportdefault{setup(){letstate=reactive({input:'',groceries:[],groceriesLeft:computed(()=>{groceries.length})})鍑芥暟addGrocery(){state.groceries.push(state.input)state.input=''}functiondeleteGrocery(index){state.groceries.splice(index,1);}return{state,addGrocery,deleteGrocery}}}鎴戜滑鏉ュ垎鏋愪竴涓嬩笂闈㈢殑杩囩▼馃槈import{reactive,computed}from'vue'VueCompositionAPI鏆撮湶浜嗗緢澶歏ue涓殑鏍稿績鍑芥暟锛屾瘮濡俽eactive鍜宑omponent鏂规硶锛屾墍浠ユ垜浠渶瑕佸鍏ヤ粬浠€俥xportdefault{setup(){setup()鏂规硶鐨勫紩鍏ユ槸Vue3涓渶澶х殑鍙樺寲涔嬩竴銆傛湰璐ㄤ笂锛屽畠鍏佽鎴戜滑纭畾浼犲洖缁欐ā鏉跨殑鍐呭锛屼互鍙婅繑鍥炵殑浠讳綍鍐呭閮藉彲浠ュ湪妯℃澘涓闂€傛垜浠彲浠ヨ缃搷搴斿紡鏁版嵁銆佺敓鍛藉懆鏈熴€佽绠楀睘鎬с€佸畾涔夌殑鏂规硶骞惰繑鍥炴垜浠湪璁剧疆涓兂瑕佺殑浠讳綍涓滆タ銆俵etstate=reactive({input:'',groceries:[],groceriesLeft:computed(()=>{groceries.length})})閫氳繃灏嗘墍鏈夎繖浜涙暟鎹寘瑁呭湪鍙嶅簲寮忔柟娉曚腑锛屾墍鏈夋暟鎹皢鍦ㄥ唴閮ㄦ垚涓哄弽搴斿叕寮忋€傛鐘舵€佹ā寮忔潵鑷狢ompositionAPI鏂囨。銆俽eactive()鍑芥暟鎺ュ彈涓€涓璞′綔涓哄弬鏁板苟杩斿洖涓€涓唬鐞嗗璞★紝鎵€鏈夌殑鏁版嵁閮戒細鍦ㄥ唴閮ㄥ彉鎴愬弽搴旀€х殑銆傞渶瑕佹敞鎰忕殑涓€浠朵簨鏄垜浠０鏄巊roceryLeft鍙橀噺鐨勬柟寮忋€傚畠鏄竴涓绠楀睘鎬э紝鍦╯etup()鏂规硶涓畾涔夛紝涓嶅啀鍗曠嫭澹版槑銆俧unctionaddGrocery(){state.groceries.push(state.input)state.input=''}functiondeleteGrocery(index){state.groceries.splice(index,1)}鍑芥暟澹版槑娌℃湁澶ぇ鍙樺寲锛屼笉鍚岀殑鏄敱浜庢墍鏈夌殑鍝嶅簲鏁版嵁閮戒繚瀛樺湪state瀵硅薄涓紝鎵€浠ユ垜浠笉寰椾笉浣跨敤state瀵硅薄杩涜璁块棶锛屼絾杩欏苟涓嶆槸Vue3鐗规湁鐨勩€俽eturn{state,addGrocery,deleteGrocery}鏈€鍚庯紝鎴戜滑甯屾湜浠巗etup()鏂规硶涓繑鍥炶繖浜涘嚱鏁帮紝浠ヤ究鍙互鍦ㄦā鏉垮唴璁块棶澹版槑鐨勬暟鎹拰鏂规硶銆傞娆″紩鍏ヨ繖绉嶆柟娉曟椂锛孷ue绀惧尯涓瓨鍦ㄥ緢澶氬弽瀵规剰瑙侊紝鍥犱负寮€鍙戜汉鍛樹笉鎯宠杩紪鍐欒繖绉嶆柊鏂规硶銆傜劧鑰岋紝杩欎篃鏄彲閫夌殑锛岃繖鎰忓懗鐫€鎴戜滑浠嶇劧鍙互浣跨敤vue2鐨勬柟寮忔潵瀹屾垚瀹冦€係uspense鐜板凡鍦╒ue涓彲鐢⊿uspense鏄疪eact鐨勪竴涓壒鎬э紝宸插湪Vue3涓紩鍏ャ€係uspense浣跨粍浠垛€滅瓑寰呪€濆紓姝ユ搷浣滐紝鐩村埌寮傛鎿嶄綔鍦ㄥ憟鐜颁箣鍓嶅畬鎴愩€傚綋鎴戜滑鎯冲湪setup()鏂规硶涓紓姝ュ姞杞藉唴瀹规椂锛岃繖寰堟湁鐢ㄣ€傜畝鑰岃█涔嬶紝鍙渶鐭ラ亾璁剧疆鏂规硶鍙互鍍忎换浣曞叾浠栨柟娉曚竴鏍峰紓姝ャ€傚鏋滄垜浠兂鍦ㄧ瓑寰呯粍浠惰幏鍙栨暟鎹苟瑙ｆ瀽瀹冩椂鏄剧ず绫讳技鈥淒esperatelyloading...鈥濈殑鍐呭锛屾垜浠彧闇€涓夋鍗冲彲瀹炵幇Suspense銆傚皢寮傛缁勪欢鍖呰鍦?template#default>鏍囩涓湪鎴戜滑鐨勫紓姝ョ粍浠舵梺杈规坊鍔犱竴涓甫鏈夋爣绛?template#fallback>鐨勫悓绾х粍浠躲€備娇鐢ㄦ彃妲藉皢涓や釜缁勪欢鍖呰鍦ㄤ竴涓?suspense>缁勪欢涓紝Suspense灏嗗憟鐜板洖閫€鍐呭锛岀洿鍒伴粯璁ゅ唴瀹瑰噯澶囧氨缁€傜劧鍚庡畠浼氳嚜鍔ㄥ垏鎹㈠埌鏄剧ず鎴戜滑鐨勫紓姝ョ粍浠躲€?Suspense> 鏈涓嬫柟鐨勫唴瀹圭敱PortalVue娓叉煋鍦ㄥ彸/涓嬶紙绾㈣壊锛夊鍣ㄤ腑
