Vue3宸茬粡绋冲畾浜嗕竴娈垫椂闂淬€傝澶氫唬鐮佸簱鍦ㄧ敓浜т腑浣跨敤瀹冿紝鍏朵粬鎵€鏈変汉鏈€缁堥兘蹇呴』杩佺Щ鍒癡ue3銆傛垜鐜板湪鏈夋満浼氫娇鐢ㄥ畠骞惰褰曚簡鎴戠殑閿欒锛屾偍鍙兘甯屾湜閬垮厤杩欎簺閿欒銆備娇鐢≧eactive澹版槑鍘熷鍊兼暟鎹０鏄庢浘缁忛潪甯哥畝鍗曪紝浣嗙幇鍦ㄦ湁寰堝杈呭姪鍑芥暟鍙緵鎴戜滑浣跨敤銆傜洰鍓嶇殑瑙勫垯鏄細浣跨敤reactive澹版槑Object銆丄rray銆丮ap銆丼et锛屼娇鐢╮ef澹版槑String銆丯umber銆丅oolean浣跨敤reactive瀵逛簬鍘熷鍊间細杩斿洖涓€涓獁arning锛岃鍊间笉浼氬彉鎴恟eactivedata銆?*娌℃湁鎸夐鏈熷伐浣?/鐭涚浘鐨勬槸锛屽彟涓€绉嶆柟娉曟槸鍙兘鐨勩€備緥濡傦紝浣跨敤ref澹版槑涓€涓狝rray浼氬湪鍐呴儴璋冪敤reactive銆傝В鏋勫搷搴斿紡鏁版嵁鍋囪鎮ㄦ湁涓€涓叿鏈夎鏁板睘鎬х殑鍝嶅簲寮忓璞″拰涓€涓敤浜庡鍔犺鏁扮殑鎸夐挳銆?template>Counter:{{state.count}}澧炲姞涓婇潰鐨勯€昏緫闈炲父绠€鍗曞苟涓旀寜棰勬湡宸ヤ綔锛屼絾鏄偍鍙互浣跨敤javascript鐨勮В鏋勬潵鎵ц浠ヤ笅鎿嶄綔锛?*涓嶆寜棰勬湡宸ヤ綔*/Counter:{{count}}
澧炲姞浠ｇ爜鐪嬭捣鏉ユ槸涓€鏍风殑锛屾牴鎹垜浠箣鍓嶇殑缁忛獙锛屽簲璇ュ彲浠ワ紝浣嗗疄闄呬笂锛孷ue鐨勫搷搴斿紡璺熻釜鏄€氳繃灞炴€ц闂€傝繖鎰忓懗鐫€鎴戜滑鏃犳硶鍒嗛厤鎴栬В鏋勫弽搴斿璞★紝鍥犱负涓庣涓€涓紩鐢ㄧ殑鍙嶅簲杩炴帴宸叉柇寮€銆傝繖鏄娇鐢ㄥ搷搴斿紡杈呭姪鍑芥暟鐨勯檺鍒朵箣涓€銆傚.value鎰熷埌鍥版儜鍚屾牱锛屽甫鏈塺ef鐨勫鎬ā寮忓彲鑳藉緢闅句範鎯€俁ef鎺ュ彈涓€涓€煎苟杩斿洖涓€涓弽搴斿璞°€傝鍊煎湪.value灞炴€т笅鐨勫璞″唴閮ㄥ彲鐢ㄣ€俢onstcount=ref(0)console.log(count)//{value:0}console.log(count.value)//0count.value++console.log(count.value)//1浣唕ef鍦╰emplate鍦ㄦ枃浠朵腑浣跨敤鏃惰В鍖咃紝涓嶉渶瑕?value銆?scriptsetup>import{ref}from'vue'constcount=ref(0)functionincrement(){count.value++}{{count}}//涓嶉渶瑕?value浣嗘槸瑕佸皬蹇冿紒灞曞紑浠呴€傜敤浜庨《绾у睘鎬с€備笅闈㈢殑浠ｇ爜鐗囨鐢熸垚[objectObject]銆?/涓嶈杩欐牱鍋?scriptsetup>import{ref}from'vue'constobject={foo:ref(1)}{{object.foo+1}}//[objectObject]姝ｇ‘浣跨敤.value闇€瑕佹椂闂淬€傛垜瓒婃潵瓒婇绻佸湴浣跨敤瀹冿紝灏界鏈夋椂鎴戜細蹇樿濡備綍浣跨敤瀹冦€傚彂灏勪簨浠惰嚜Vue鏈€鍒濆彂甯冧互鏉ワ紝瀛愮粍浠跺凡缁忚兘澶熶娇鐢╡mit涓庣埗缁勪欢杩涜閫氫俊銆傛偍鍙渶瑕佹坊鍔犱竴涓嚜瀹氫箟浜嬩欢渚﹀惉鍣ㄦ潵渚﹀惉浜嬩欢銆?/瀛愮粍浠秚his.$emit('my-event')//鐖剁粍浠?my-component@my-event="doSomething"/>鐜板湪锛岄渶瑕佷娇鐢╠efineEmits澹版槑emit銆?scriptsetup>constemit=defineEmits(['my-event'])emit('my-event')瑕佽浣忕殑鍙︿竴浠朵簨鏄紝涓嶉渶瑕佸鍏efineEmits鍜宒efineProps銆備娇鐢ㄨ剼鏈缃椂锛屽畠浠細鑷姩鍙敤銆?scriptsetup>constprops=defineProps({foo:String})constemit=defineEmits(['change','delete'])//setupcode鏈€鍚庯紝鐢变簬鐜板湪蹇呴』澹版槑浜嬩欢锛屾墍浠ヤ笉浣跨敤.native淇グ绗︼紝瀹為檯涓婂凡缁忚绉婚櫎浜嗐€傚０鏄庨檮鍔犻€夐」OptionsAPI鏂规硶鏈夊嚑涓湪鑴氭湰璁剧疆涓笉鍙楁敮鎸佺殑灞炴€с€俷ameinheritAttrs鎻掍欢鎴栧簱鎵€闇€鐨勮嚜瀹氫箟閫夐」鐨勮В鍐虫柟妗堟槸鍦ㄥ悓涓€缁勪欢涓缃袱涓笉鍚岀殑鑴氭湰锛屽鑴氭湰setupRFC鎵€瀹氫箟銆?script>exportdefault{name:'CustomName',inheritAttrs:false,customOptions:{}}浣跨敤鍝嶅簲寮忚浆鎹eactivityTransform鏄疺ue3鐨勪竴涓疄楠孉鏃ㄥ湪绠€鍖栫粍浠跺０鏄庢柟寮忕殑闈╁懡鎬т絾鏈変簤璁殑鍔熻兘銆傝繖涓兂娉曟槸浣跨敤缂栬瘧鏃惰浆鎹㈡潵鑷姩瑙ｅ寘ref骞朵娇.value杩囨椂銆備絾鐜板湪瀹冨凡琚純鐢紝骞跺皢鍦╒ue3.3涓垹闄ゃ€傚畠浠嶇劧鍙互浣滀负涓€涓寘浣跨敤锛屼絾鐢变簬瀹冧笉鏄疺ue鏍稿績鐨勪竴閮ㄥ垎锛屾墍浠ユ渶濂戒笉瑕佸湪涓婇潰鎶曞叆鏃堕棿銆傚畾涔夊紓姝ョ粍浠朵互鍓嶏紝寮傛缁勪欢鏄€氳繃灏嗗叾灏佽鍦ㄥ嚱鏁颁腑鏉ュ０鏄庣殑銆俢onstasyncModal=()=>import('./Modal.vue')浠嶸ue3寮€濮嬶紝闇€瑕佷娇鐢╠efineAsyncComponent杈呭姪鍑芥暟鏄惧紡瀹氫箟寮傛缁勪欢銆俰mport{defineAsyncComponent}from'vue'constasyncModal=defineAsyncComponent(()=>import('./Modal.vue'))鍦ㄦā鏉夸腑浣跨敤鍐椾綑鍖呰鍏冪礌鍦╒ue2涓紝缁勪欢妯℃澘闇€瑕佸崟涓牴鍏冪礌锛岃繖鏈夋椂浼氬紩鍏ヤ笉蹇呰鐨勫寘瑁呭厓绱犮€?!--Layout.vue-->...
杩欎笉鍐嶆槸蹇呴渶鐨勶紝鍥犱负鐜板湪鏀寔澶氫釜鏍瑰厓绱犮€傪煡?!--Layout.vue-->...浣跨敤閿欒鐨勭敓鍛藉懆鏈熸墍鏈夌粍浠剁敓鍛藉懆鏈熶簨浠堕兘宸查噸鍛藉悕锛屾坊鍔爋n鍓嶇紑鎴栧畬鍏ㄦ洿鏀瑰悕绉般€傛偍鍙互鍦ㄤ笅琛ㄤ腑鏌ョ湅鎵€鏈夋洿鏀广€備笉瑕佺湅鏂囨。鏈€鍚庯紝瀹樻柟鏂囨。宸茬粡杩囦慨璁互鍙嶆槧鏂扮殑API锛屽苟鍖呭惈璁稿鏈変环鍊肩殑娉ㄩ噴銆佹寚鍗楀拰鏈€浣冲疄璺点€傚嵆浣挎偍鏄竴浣嶇粡楠屼赴瀵岀殑Vue2宸ョ▼甯堬紝鎮ㄤ篃涓€瀹氫細閫氳繃闃呰鏂囨。鏉ュ涔犳柊鐨勪笢瑗裤€傛€荤粨姣忎釜妗嗘灦閮芥湁涓€涓涔犳洸绾匡紝Vue3鐨勫涔犳洸绾挎棤鐤戞瘮Vue2鏇撮櫋宄€傛垜浠嶇劧涓嶇浉淇′袱涓増鏈箣闂寸殑杩佺Щ宸ヤ綔鏄悎鐞嗙殑锛屼絾鏄粍鍚圓PI鏇村姞绠€娲侊紝涓€鏃︽帉鎻′簡瀹冨氨浼氭劅瑙夎嚜鐒躲€傛渶鍚庯紝璇疯浣忥細鐘敊鎬绘瘮浠€涔堥兘涓嶅仛瑕佸ソ銆傜姱閿欐€绘瘮浠€涔堥兘涓嶅仛瑕佸ソ寰楀銆傝繖灏辨槸鏈枃鐨勫叏閮ㄥ唴瀹广€傚鏋滃浣犳湁甯姪锛屾杩庣偣璧炴敹钘忚浆鍙憕
