娣卞叆浜嗚В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
```
鍦ㄨ繖涓ず渚嬩腑锛孧yButton.vue鏄竴涓嚜瀹氫箟缁勪欢锛屾帴鏀秏essage灞炴€т綔涓簆rop骞舵樉绀哄湪鎸夐挳涓娿€?/p>
涓夈€乂ue3鍏叡缁勪欢鐨勫垱寤轰笌搴旂敤
鍏叡缁勪欢鐢ㄤ簬灏佽鍙鐢ㄧ殑鍔熻兘鎴朥I鍏冪礌銆備互涓嬫槸涓€涓熀纭€鎸夐挳缁勪欢鐨勫垱寤轰笌搴旂敤绀轰緥锛?/p>
1. 鍒涘缓ButtonComponent.vue缁勪欢锛?/p>
```vue
```
2. 鍦ㄥ叾浠朧ue缁勪欢涓紩鍏ュ苟搴旂敤璇ョ粍浠讹細
```vue
```
鍥涖€乂ue3 Composition API鍒濇帰
Composition API鎻愪緵浜嗕竴绉嶇畝娲佺殑缁勪欢閫昏緫缂栧啓鏂瑰紡锛屽挨鍏堕€傜敤浜庡ぇ鍨嬪簲鐢ㄣ€備互涓嬫槸涓€涓娇鐢╯etup鍑芥暟瀹氫箟缁勪欢閫昏緫鐨勭ず渚嬶細
```vue
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
return { count, increment };
},
};
```
浜斻€佸叕鍏辩粍浠剁殑澶嶇敤涓庝紭鍖栵細Slot鐨勪娇鐢ㄤ笌鍔ㄦ€佹彃妲姐€佸姩鎬佺粍浠朵笌Keep-Alive浼樺寲鎬ц兘绛夈€傛垜浠皢娣卞叆鎺㈣杩欎簺鎶€鏈紝骞剁粰鍑哄疄闄呭簲鐢ㄧず渚嬨€?鎺ヤ笅鏉ユ槸TypeScript鍦ㄥ叕鍏辩粍浠朵腑鐨勫簲鐢ㄩ儴鍒嗙瓑鍚庣画鍐呭...... 鎺ヤ笅鏉ョ殑閮ㄥ垎鎴戜滑灏嗕粙缁嶅浣曞湪Vue鍏叡缁勪欢涓娇鐢═ypeScript浠ュ寮虹被鍨嬪畨鍏ㄣ€?绱ф帴鐫€鎴戜滑浼氭帰璁ㄥ浣曟墦鍖呬笌鍙戝竷Vue鍏叡缁勪欢鑷矴itHub Pages鎴杗pm绛夋楠わ紝浠ュ強瀹炶返妗堜緥鍒嗘瀽绛夊唴瀹广€傝繖浜涢兘灏嗗府鍔╀綘娣卞叆鐞嗚В骞舵帉鎻ue鍏叡缁勪欢鐨勫簲鐢ㄤ笌浠峰€笺€?閫氳繃瀛︿範鍜屽疄璺佃繖浜涙寚鍗楀唴瀹癸紝浣犲皢鑳藉楂樻晥鏋勫缓楂樿川閲忕殑Vue椤圭洰銆傛帰绱笌璇勪环琛ㄥ崟缁勪欢RatingForm.vue鐨勯瓍鍔?/p>
馃専 鐢ㄦ埛璇勪环锛氫竴閿彁浜わ紝杞绘澗琛ㄨ揪浣犵殑瑙傜偣锛?/p>
鍦ㄦ繁鍏ュ墫鏋愪竴涓」鐩椂锛屾垜浠€昏兘鍙戠幇閭d簺绮惧績璁捐鐨勫叕鍏辩粍浠跺浣曞湪瀹為檯搴旂敤涓ぇ鏀惧紓褰┿€備粖澶╋紝璁╂垜浠仛鐒︿簬鍏朵腑鐨凴atingForm.vue缁勪欢锛屾劅鍙楀叾寮哄ぇ鐨勫姛鑳戒笌榄呭姏銆?/p>
鎯宠薄涓€涓嬶紝涓€涓祦鐣呯殑鐢ㄦ埛璇勪环绯荤粺锛屽彧闇€绠€鍗曠殑鎿嶄綔锛岀敤鎴蜂究鑳借交鏉炬彁浜よ嚜宸辩殑璇勪环銆傝繖涓€鍒囩殑鑳屽悗锛岄兘绂讳笉寮€RatingForm.vue杩欎竴鍏抽敭缁勪欢鐨勮础鐚€傚畠涓嶄粎鏄捐憲鎻愬崌浜嗕唬鐮佺殑澶嶇敤鎬э紝鏇村ぇ澶х畝鍖栦簡寮€鍙戞祦绋嬶紝璁╂瀯寤虹敤鎴疯瘎浠风郴缁熷彉寰楀墠鎵€鏈湁鐨勯珮鏁堛€?/p>
鉁?鍦ㄥ疄闄呭簲鐢ㄤ腑锛屼綘浼氬彂鐜拌繖涓粍浠惰兘澶熷緢濂藉湴铻嶅叆鍚勭椤圭洰鐜锛屾棤璁烘槸浠€涔堥鏍笺€佷粈涔堝钩鍙帮紝瀹冮兘鑳借交鏉惧簲瀵广€傚洜涓洪珮搴︾殑鑷畾涔夊拰鐏垫椿鎬ц瀹冭兘澶熼€傚簲鍚勭闇€姹傦紝鏃犺鏄簲鏄熻瘎浠枫€佸垎鏁拌瘎浠疯繕鏄枃瀛楄瘎浠凤紝閮借兘杞绘澗瀹炵幇銆?/p>
鑰岃繖涓€鍒囩殑渚垮埄涓庨珮鏁堬紝閮界涓嶅紑寮€鍙戣€呬滑鐨勭簿蹇冭璁°€備粬浠€氳繃鍙嶅娴嬭瘯銆佽皟鏁村拰浼樺寲锛屾渶缁堟墦閫犲嚭杩欐牱涓€涓姛鑳藉己澶с€佹槗浜庝娇鐢ㄧ殑缁勪欢銆傝€屾垜浠殑妗堜緥鍒嗘瀽锛屾鏄负浜嗗睍绀鸿繖涓粍浠跺浣曞湪瀹為檯椤圭洰涓彂鎸ュ畠鐨勪环鍊硷紝纭繚寮€鍙戣€呬滑鑳藉杞绘澗涓婃墜锛屽揩閫熸瀯寤哄嚭浼樼鐨勭敤鎴疯瘎浠风郴缁熴€?/p>
鏃犺浣犳槸寮€鍙戣€呰繕鏄璁″笀锛岄兘鍙互浠庤繖绡囨枃绔犱腑鏀惰幏瀹濊吹鐨勭粡楠屽拰鍚ず銆傛垜浠笉浠呬负浣犳彁渚涗簡璇︾粏鐨勭悊璁虹煡璇嗭紝杩樹负浣犲睍绀轰簡瀹炶返涓殑妗堜緥銆傚笇鏈涜繖绡囨枃绔犺兘鎴愪负浣犲紑鍙戜箣璺笂鐨勫緱鍔涘姪鎵嬶紝甯姪浣犳洿濂藉湴鏋勫缓鐢ㄦ埛璇勪环绯荤粺锛屾彁鍗囩敤鎴蜂綋楠岋紒馃専 |