娣卞叆浜嗚ВVue3鍏叡缁勪欢鐨勬瀯寤轰笌搴旂敤鎸囧崡

姒傝堪

鏈寚鍗楀皢甯︿綘浠庡熀纭€寮€濮嬶紝娣卞叆娴呭嚭鍦板涔燰ue3鍏叡缁勪欢鐨勬瀯寤轰笌搴旂敤銆傛垜浠皢娑电洊濡備綍鎼缓Vue3寮€鍙戠幆澧冦€佺悊瑙ue3缁勪欢鍩虹銆佸垱寤哄拰搴旂敤Vue3鍏叡缁勪欢銆佹帰绱omposition API銆佹帉鎻″姩鎬佺粍浠朵笌Keep-Alive鐨勪紭鍖栥€佷娇鐢═ypeScript澧炲己绫诲瀷瀹夊叏锛屼互鍙婂畬鎴怴ue3鍏叡缁勪欢鐨勬墦鍖呬笌鍙戝竷銆傛鎸囧崡鍐呭鍏ㄩ潰锛屾棬鍦ㄥ府鍔╀綘楂樻晥鏋勫缓Vue3椤圭洰銆?/p>

涓€銆乂ue3绠€浠嬩笌鐜鎼缓

Vue3浣滀负Vue.js妗嗘灦鐨勬渶鏂扮増鏈紝涓昏鍏虫敞寮€鍙戞晥鐜囦笌鎬ц兘鐨勬彁鍗囥€備负浜嗗厖鍒嗗埄鐢╒ue3鐨勬柊鐗规€э紝棣栧厛闇€瑕佹惌寤轰竴涓悎閫傜殑寮€鍙戠幆澧冦€?/p>

1. 瀹夎Vue3鍙奦ue CLI

浣跨敤npm瀹夎鍏ㄥ眬Vue CLI锛?/p>

```bash

npm install -g vue-cli

```

2. 鍒涘缓鏂扮殑Vue3椤圭洰

鍦ㄧ粓绔腑杩愯浠ヤ笅鍛戒护鍒涘缓涓€涓柊鐨刅ue3椤圭洰锛?/p>

```bash

vue create my-vue3-project

```

閫夋嫨Vue3浣滀负浣犵殑Vue鐗堟湰銆傚畬鎴愰」鐩垱寤哄悗锛屼綘灏嗘嫢鏈変竴涓熀纭€鐨刅ue3椤圭洰銆?/p>

浜屻€佺悊瑙ue3缁勪欢鍩虹

缁勪欢鏄疺ue3鐨勬牳蹇冩蹇典箣涓€锛岀敤浜庡皝瑁匲I閫昏緫涓庡姛鑳姐€備互涓嬫槸涓€涓畝鍗曠殑鍗曟枃浠剁粍浠讹紙SFC锛夌ず渚嬶細

```vue

{{ message }}

```

鍦ㄨ繖涓ず渚嬩腑锛孧yButton.vue鏄竴涓嚜瀹氫箟缁勪欢锛屾帴鏀秏essage灞炴€т綔涓簆rop骞舵樉绀哄湪鎸夐挳涓娿€?/p>

涓夈€乂ue3鍏叡缁勪欢鐨勫垱寤轰笌搴旂敤

鍏叡缁勪欢鐢ㄤ簬灏佽鍙鐢ㄧ殑鍔熻兘鎴朥I鍏冪礌銆備互涓嬫槸涓€涓熀纭€鎸夐挳缁勪欢鐨勫垱寤轰笌搴旂敤绀轰緥锛?/p>

1. 鍒涘缓ButtonComponent.vue缁勪欢锛?/p>

```vue

{{ buttonText }}

```

2. 鍦ㄥ叾浠朧ue缁勪欢涓紩鍏ュ苟搴旂敤璇ョ粍浠讹細

```vue

```

鍥涖€乂ue3 Composition API鍒濇帰

Composition API鎻愪緵浜嗕竴绉嶇畝娲佺殑缁勪欢閫昏緫缂栧啓鏂瑰紡锛屽挨鍏堕€傜敤浜庡ぇ鍨嬪簲鐢ㄣ€備互涓嬫槸涓€涓娇鐢╯etup鍑芥暟瀹氫箟缁勪欢閫昏緫鐨勭ず渚嬶細

```vue

```

浜斻€佸叕鍏辩粍浠剁殑澶嶇敤涓庝紭鍖栵細Slot鐨勪娇鐢ㄤ笌鍔ㄦ€佹彃妲姐€佸姩鎬佺粍浠朵笌Keep-Alive浼樺寲鎬ц兘绛夈€傛垜浠皢娣卞叆鎺㈣杩欎簺鎶€鏈紝骞剁粰鍑哄疄闄呭簲鐢ㄧず渚嬨€?鎺ヤ笅鏉ユ槸TypeScript鍦ㄥ叕鍏辩粍浠朵腑鐨勫簲鐢ㄩ儴鍒嗙瓑鍚庣画鍐呭...... 鎺ヤ笅鏉ョ殑閮ㄥ垎鎴戜滑灏嗕粙缁嶅浣曞湪Vue鍏叡缁勪欢涓娇鐢═ypeScript浠ュ寮虹被鍨嬪畨鍏ㄣ€?绱ф帴鐫€鎴戜滑浼氭帰璁ㄥ浣曟墦鍖呬笌鍙戝竷Vue鍏叡缁勪欢鑷矴itHub Pages鎴杗pm绛夋楠わ紝浠ュ強瀹炶返妗堜緥鍒嗘瀽绛夊唴瀹广€傝繖浜涢兘灏嗗府鍔╀綘娣卞叆鐞嗚В骞舵帉鎻ue鍏叡缁勪欢鐨勫簲鐢ㄤ笌浠峰€笺€?閫氳繃瀛︿範鍜屽疄璺佃繖浜涙寚鍗楀唴瀹癸紝浣犲皢鑳藉楂樻晥鏋勫缓楂樿川閲忕殑Vue椤圭洰銆傛帰绱笌璇勪环琛ㄥ崟缁勪欢RatingForm.vue鐨勯瓍鍔?/p>

馃専 鐢ㄦ埛璇勪环锛氫竴閿彁浜わ紝杞绘澗琛ㄨ揪浣犵殑瑙傜偣锛?/p>

鍦ㄦ繁鍏ュ墫鏋愪竴涓」鐩椂锛屾垜浠€昏兘鍙戠幇閭ｄ簺绮惧績璁捐鐨勫叕鍏辩粍浠跺浣曞湪瀹為檯搴旂敤涓ぇ鏀惧紓褰┿€備粖澶╋紝璁╂垜浠仛鐒︿簬鍏朵腑鐨凴atingForm.vue缁勪欢锛屾劅鍙楀叾寮哄ぇ鐨勫姛鑳戒笌榄呭姏銆?/p>

鎯宠薄涓€涓嬶紝涓€涓祦鐣呯殑鐢ㄦ埛璇勪环绯荤粺锛屽彧闇€绠€鍗曠殑鎿嶄綔锛岀敤鎴蜂究鑳借交鏉炬彁浜よ嚜宸辩殑璇勪环銆傝繖涓€鍒囩殑鑳屽悗锛岄兘绂讳笉寮€RatingForm.vue杩欎竴鍏抽敭缁勪欢鐨勮础鐚€傚畠涓嶄粎鏄捐憲鎻愬崌浜嗕唬鐮佺殑澶嶇敤鎬э紝鏇村ぇ澶х畝鍖栦簡寮€鍙戞祦绋嬶紝璁╂瀯寤虹敤鎴疯瘎浠风郴缁熷彉寰楀墠鎵€鏈湁鐨勯珮鏁堛€?/p>

鉁?鍦ㄥ疄闄呭簲鐢ㄤ腑锛屼綘浼氬彂鐜拌繖涓粍浠惰兘澶熷緢濂藉湴铻嶅叆鍚勭椤圭洰鐜锛屾棤璁烘槸浠€涔堥鏍笺€佷粈涔堝钩鍙帮紝瀹冮兘鑳借交鏉惧簲瀵广€傚洜涓洪珮搴︾殑鑷畾涔夊拰鐏垫椿鎬ц瀹冭兘澶熼€傚簲鍚勭闇€姹傦紝鏃犺鏄簲鏄熻瘎浠枫€佸垎鏁拌瘎浠疯繕鏄枃瀛楄瘎浠凤紝閮借兘杞绘澗瀹炵幇銆?/p>

鑰岃繖涓€鍒囩殑渚垮埄涓庨珮鏁堬紝閮界涓嶅紑寮€鍙戣€呬滑鐨勭簿蹇冭璁°€備粬浠€氳繃鍙嶅娴嬭瘯銆佽皟鏁村拰浼樺寲锛屾渶缁堟墦閫犲嚭杩欐牱涓€涓姛鑳藉己澶с€佹槗浜庝娇鐢ㄧ殑缁勪欢銆傝€屾垜浠殑妗堜緥鍒嗘瀽锛屾鏄负浜嗗睍绀鸿繖涓粍浠跺浣曞湪瀹為檯椤圭洰涓彂鎸ュ畠鐨勪环鍊硷紝纭繚寮€鍙戣€呬滑鑳藉杞绘澗涓婃墜锛屽揩閫熸瀯寤哄嚭浼樼鐨勭敤鎴疯瘎浠风郴缁熴€?/p>

鏃犺浣犳槸寮€鍙戣€呰繕鏄璁″笀锛岄兘鍙互浠庤繖绡囨枃绔犱腑鏀惰幏瀹濊吹鐨勭粡楠屽拰鍚ず銆傛垜浠笉浠呬负浣犳彁渚涗簡璇︾粏鐨勭悊璁虹煡璇嗭紝杩樹负浣犲睍绀轰簡瀹炶返涓殑妗堜緥銆傚笇鏈涜繖绡囨枃绔犺兘鎴愪负浣犲紑鍙戜箣璺笂鐨勫緱鍔涘姪鎵嬶紝甯姪浣犳洿濂藉湴鏋勫缓鐢ㄦ埛璇勪环绯荤粺锛屾彁鍗囩敤鎴蜂綋楠岋紒馃専