娴烽様鍑奔璺冿紝澶╅珮浠婚笩椋炪€侶ey 浣犲ソ锛佹垜鏄尗鍔汳ollyVue3宸茬粡鍙戝竷鏈変竴娈垫椂闂翠簡锛屽悓鏃朵篃寰楀埌浜嗗悇澶у巶鍟嗗拰绀惧尯鐨勬敮鎸佸拰浼楀寮€鍙戣€呭枩鐖憋紝鍛ㄨ竟鐢熸€佷篃姝ｅ湪閫愭瀹屽杽銆傚彲璋撴槸涓€鐗囨娆ｅ悜鑽ｇ殑缇庢櫙銆傛湰鏂囨剰鍦ㄩ€氳繃姊崇悊Vue2甯哥敤api閫氳繃宸紓鍖栧姣擵ue3锛屽府鍔╀綘蹇€熸帉鎻ue3鏈枃鍋囪浣犲凡缁忔湁涓€瀹歷ue2瀹炴搷缁忛獙锛屼笉浼氳繃澶氭弿杩癮pi缁嗚妭涓轰粈涔堣鍗囩骇Vue3锛熶袱涓叧閿殑鍥犵礌瀵艰嚧浜嗘垜浠€冭檻閲嶅啓Vue鏂扮殑涓昏鐗堟湰锛氫富娴佹祻瑙堝櫒瀵规柊鐨凧avaScript璇█鐗规€х殑鏅亶鏀寔銆傚綋鍓峍ue浠ｇ爜搴撻殢鐫€鏃堕棿鐨勬帹绉昏€屾毚闇插嚭鏉ョ殑璁捐鍜屼綋绯绘灦鏋勯棶棰樸€傛洿澶氱粏鑺傦紝鎴戜滑鍙互鍚惉绁栧笀鐖峰湪鐭ヤ箮鐨勫洖绛斿挨闆ㄦ邯浜茬瑪锛氶噸澶存潵杩囩殑 Vue 3 甯︽潵浜嗕粈涔堬紵 vue2 VS vue3锛堢紪鐮佷綋鎰燂級杩戞湡鍋氫簡涓€涓叧浜庘€滃叡浜杞︹€濈殑鍚庡彴绠＄悊绯荤粺椤圭洰锛岀敱浜庢槸鏂伴」鐩紝鎴戜究澶ц儐閫夊畾浜唙ue3+vite+typescript+element plus浣滀负鍩虹鎶€鏈爤銆備笉杩囩洰鍓嶅競闈笂骞舵病鏈変竴娆惧厤璐逛笖濂界敤鐨勪腑鍚庡彴鍩虹妯℃澘妗嗘灦锛屼簬鏄垜鍙堜豢鐓х潃鑺辫￥琛╁ぇ浣殑浼犻€侀棬锛歷ue-admin-template鐓х尗鐢昏檸鐨勫啓浜嗕竴涓獀ue3鐗堟湰鐨剉ue-element-admin骞朵笖搴旂敤鍒板疄闄呴」鐩腑銆傚氨鎴戜釜浜虹紪鐮佷範鎯€岃█锛岀浉瀵逛簬vue2鐨凮ption api鐨勭洿瑙傛槑浜嗭紝vue3鐨凜omposition api鍙互鏇村ソ鐨勭粍缁囦唬鐮侊紝鏀寔鑷畾涔塰ooks鏉ヨ揪鍒颁唬鐮佸鐢紝浠庤€屽彇浠ixin锛屼唬鐮侀鏍间笂锛屼篃鍙互鎶婄被浼肩殑涓氬姟閫昏緫鍐欏埌涓€涓唬鐮佸潡锛屼粠鑰岄伩鍏嶄唬鐮佸垎鏁ｏ紝璧拌浠ｇ爜闇€瑕佷笂涓嬪弽澶嶆í璺炽€傛洿鍙嬪ソ鐨勬敮鎸佷簡TS浠ュ強浼楀鏂扮壒鎬х殑鍔犲叆锛屼篃璁﹙ue3鍐欒捣鏉ユ洿鐖斤紝鏇村埄浜庝唬鐮佺淮鎶ゅ拰鎷撳睍銆傜粨鍚坴ite浣跨敤锛屾洿鏄瀬澶ф彁鍗囦簡寮€鍙戜綋楠屻€傛€讳綋鏉ヨ锛岃鎴戜滑鎷ユ姳vue3鍚э紝缁檝ue鍥㈤槦鐐逛釜璧烉煈嶐煈嶐煈峷ue3姣旇緝鐩磋鐨勬柊鐗规€у叏鏂扮殑Composition api璁╂垜浠崲涓€绉嶆柟寮忕粍缁囦唬鐮?lt;script setup> 璇硶绯栵紝浣垮緱浠ｇ爜鏇寸畝娲佸彲浠ョ渷鍘籺emplate鐨勬牴鍏冪礌鍖呰９鏍囩鎻愪緵浜嗘柊鐨勫唴缃粍浠?lt;teleport>锛屾敮鎸佷簡缁勪欢鍙互鎸傝浇鍒颁换鎰廳om鑺傜偣涓嬫彁渚涗簡鍦╟ss涓娇鐢╲-bind鏉ュ紩鍏cript鍙橀噺锛屽張涓€涓己澶х殑榛戦瓟娉曞皬鎶€宸т娇鐢╟reateApp鏉ュ垱寤哄簲鐢ㄥ疄渚嬫洿鍙嬪ソ鐨凾S鏀寔浣跨敤proxy浠ｇ悊鏂瑰紡鏉ユ浛鎹㈡帀defineproperty鍏ㄥ眬鍜屽唴閮?API 宸茬粡琚噸鏋勪负鏀寔 tree-shakeoption api VS composition apicomposition api鏄痸ue3鐨勪竴澶х壒鑹诧紝vue3瀵瑰鏆撮湶浜嗗ぇ閲忓嚱鏁颁緵浠ユ垜浠寜闇€寮曠敤锛岄殢鎰忕粍鍚堝湪option api涓紝鎴戜滑閫氳繃瀹炰緥鍖朧ue骞跺皢琛屼负瀵硅薄浣滀负鍙傛暟浼犲叆new Vue({ data(){ return {} }, methods:{}, computed:{}, created(){}, ...})鍦–omposition api 鎴戜滑鍙互閫氳繃setup浣滀负鍏ュ彛鍑芥暟锛屽苟杩斿洖涓€涓璞℃暟鎹毚闇茬粰妯℃澘浣跨敤<template> <div @click="hi">{{ msg }}</div></template><script>export default { setup() { const msg = ref('Hello!') function hi() { console.log(msg) } // 鏆撮湶缁欐ā鏉? return { msg, hi } } }</script>setup杩樻敮鎸佸彟涓€绉嶅啓娉曪紝鏇村姞绠€鍖栦簡浠ｇ爜<template> <div @click="hi">{{ msg }}</div></template><script setup>const msg = ref('Hello!')function hi() { console.log(msg)}</script>褰撲娇鐢?lt;script setup>聽鐨勬椂鍊欙紝浠讳綍鍦?lt;script setup>聽澹版槑鐨勯《灞傜殑缁戝畾 (鍖呮嫭鍙橀噺锛屽嚱鏁板０鏄庯紝浠ュ強 import 寮曞叆鐨勫唴瀹? 閮借兘鍦ㄦā鏉夸腑鐩存帴浣跨敤鍝嶅簲鏁版嵁鐨勫畾涔塿ue2涓妸鍝嶅簲鏁版嵁瀹氫箟鍒癲ata鍑芥暟鐨剅eturn涓璬ata(){ return { ... }}vue3涓垜浠彲浠ラ€氳繃ref鍜宺eactive鏉ュ畾涔夊搷搴旀暟鎹甤onst num = ref(0)const obj = reactive({name:'molly'})ref锛氬湪妯℃澘涓彲浠ョ洿鎺ヤ娇鐢╮ef瀹氫箟鐨勬暟鎹紝鍦╦s涓垯闇€瑕佷娇鐢?value鏉ュ彇鍊兼垨璧嬪€间娇鐢╣eter锛宻eter鏂瑰紡瀹炵幇鍝嶅簲寮忓缓璁娇鐢╮ef鏉ュ畾涔夊熀纭€鏁版嵁reactive锛氬彲浣跨敤toRefs灏嗗叾瑙ｅ寘锛屽湪妯℃澘涓洿鎺ヤ娇鐢ㄥ搴旂殑attribute浣跨敤proxy浠ｇ悊鏂瑰紡瀹炵幇鍝嶅簲寮忓缓璁娇鐢╮eactive鏉ュ畾涔夊鏉傛暟鎹敓鍛藉懆鏈熼挬瀛恦ue2涓彁渚涗簡11涓敓鍛藉懆鏈熼挬瀛愶紝鎴戜滑鍙湪閫夐」瀵硅薄涓婄洿鎺ュ畾涔変娇鐢╲ue3涓妸鐢熷懡鍛ㄦ湡閽╁瓙鍗曠嫭鎶界鎴愪簡涓€涓釜瀵瑰簲鐨刪ooks鍑芥暟锛屼互onXXX鐨勫舰寮忚皟鐢ㄣ€傚€煎緱娉ㄦ剰鐨勬槸鐢熷懡鍛ㄦ湡閽╁瓙娉ㄥ唽鍑芥暟鍙兘鍦╯etup鏈熼棿鍚屾浣跨敤锛岃繖灏辨剰鍛崇潃beforeCreate鍜宑reated绛夊悓浜巗etup鎵ц闃舵銆傚叾浠栫殑鍛ㄦ湡鐢ㄦ硶鍩烘湰涓€鑷达紝渚嬪锛歮ounted瀵瑰簲onMountedimport { onMounted } from 'vue'setup() { onMounted(() => { console.log('mounted!') })}computed涓や釜鐗堟湰鐨刢omputed鍩烘湰淇濇寔涓€鑷达紝涓嶅悓鐨勬槸vue3灏哻omputed鎶界鎴愪竴涓猦ooks鍑芥暟浣跨敤// vue2computed:{ num:()=>this.num *2}// vue3const numVal = computed(() => num.value *2)watchvue2锛歸atch鐩戝惉涓€涓壒瀹氭暟鎹簮鐨勭粨鏋滃彉鍖栵紝鍥炶皟鍑芥暟寰楀埌鐨勫弬鏁颁负鏂板€煎拰鏃у€笺€傞櫎浜嗙洃鍚琩ata涓殑鏁版嵁杩樺彲浠ョ洃鍚琾rops銆?route銆?emit銆乧omputed銆傚彲閫氳繃閫夐」鍙傛暟deep鏉ユ繁搴︾洃鍚紝鎸囧畾聽immediate: true聽灏嗙珛鍗宠Е鍙戝洖璋僿atch:{ obj:(val,old)=>{ deep: true, immediate: true }}vue3vue3鐨勮绠楀睘鎬у緱鍒颁簡寰堝ぇ鐨勫姞寮猴紝鏀寔鐩戝惉澶氫釜鏁版嵁婧愬拰鎵ц鍓綔鐢?/ 鐩戝惉鍗曚釜鏁版嵁婧恈onst count = ref(0)watch(count, (val, old) => { /* ... */})// 鍋囪count鏄竴涓璞★紝涔熸敮鎸佺洃鍚暣涓璞★紝鑰屾棤闇€鎸囧畾deep灞炴€?/ 鐩戝惉澶氫釜鏁版嵁婧恈onst count = ref(0)const obj = reactive({name:'molly'})watch([() => obj.name, count], ([newName, newCount], [oldName, oldCount]) => { /* ... */})// 鐩戝惉澶氫釜鏁版嵁婧愭椂锛寃atch鍑芥暟鐨勭涓€涓弬鏁板彲浼犲叆鏁版嵁婧愭暟缁勶紝绗簩涓洖璋冨嚱鏁扮殑鍙傛暟涔熸槸涓€涓暟缁剉ue3杩樻柊澧炰簡watchEffect锛岃〃绀虹珛鍗虫墽琛屼紶鍏ョ殑涓€涓嚱鏁帮紝鍚屾椂鍝嶅簲寮忚拷韪叾渚濊禆锛屽苟鍦ㄥ叾渚濊禆鍙樻洿鏃堕噸鏂拌繍琛岃鍑芥暟銆備笌watch鐩告瘮锛寃atchEffect涓嶉渶瑕佷紶鍏ユ寚瀹氱洃鍚殑鏁版嵁婧愶紝瀹冧細鑷姩鏀堕泦渚濊禆銆備篃娌℃湁鏂板€兼棫鍊肩殑姒傚康锛屽彧瑕佷緷璧栧彂鐢熷彉鍖栵紝灏变細閲嶆柊鎵ц鍑芥暟const count = ref(0)watchEffect(() => console.log(count.value))setTimeout(() => { count.value++}, 100)watchEffect 浼氳繑鍥炰竴涓敤浜庡仠姝㈣繖涓洃鍚殑鍑芥暟褰搘atchEffect鍦ㄧ粍浠剁殑setup鍑芥暟鎴栫敓鍛藉懆鏈熼挬瀛愯璋冪敤鏃讹紝渚﹀惉鍣ㄤ細琚摼鎺ュ埌璇ョ粍浠剁殑鐢熷懡鍛ㄦ湡锛屽苟鍦ㄧ粍浠跺嵏杞芥椂鑷姩鍋滄銆俢onst stop = watchEffect(() => { /* ... */})stop()filtersvue2涓垜浠彲浠ュ緢鏂逛究鐨勪娇鐢╢ilters杩囨护鍣ㄦ潵澶勭悊涓€浜涙枃鏈牸寮忚浆鎹紝瀵规暟鎹繘琛屽姞宸ャ€俧ilters: { sum(num1,num2) { return num1+num2 }}璇锋敞鎰忥細 鍦╲ue3涓紝灏嗙Щ闄よ繃婊ゅ櫒锛屼笖涓嶅啀鏀寔銆傚畼鏂规洿鎺ㄨ崘鎴戜滑浣跨敤鏂规硶璋冪敤鎴栬绠楀睘鎬ф潵鏇挎崲filters鑷充簬涓哄暐瑕佺Щ闄よ繖涓猘pi瀹樻柟鐨勮В閲婃槸锛氳櫧鐒惰繖鐪嬭捣鏉ュ緢鏂逛究锛屼絾瀹冮渶瑕佷竴涓嚜瀹氫箟璇硶锛屾墦鐮翠簡澶ф嫭鍙峰唴鐨勮〃杈惧紡鈥滃彧鏄?JavaScript鈥濈殑鍋囪锛岃繖涓嶄粎鏈夊涔犳垚鏈紝鑰屼笖鏈夊疄鐜版垚鏈€傛垜鐨勭悊瑙ｆ槸锛歛pi鍔熻兘璁捐閲嶅锛宖ilters鑳藉共鐨勪簨鍎匡紝璁＄畻灞炴€у拰鍑芥暟璋冪敤涔熻兘骞诧紝涓斿共鐨勬洿濂姐€傛墍浠ュ挨澶уぇ鍚唱绉婚櫎filters锛屽彲鎬滅殑filters鍙兘琚姏寮冧汉鐢熶害鏄姝わ紝鑱屽満涓紭鑳滃姡姹帮紝甯屾湜鎴戜滑姘歌繙閮戒笉浼氭槸閭ｄ釜琚紭鍖栨帀鐨刦ilters馃槶馃槶馃槶componentsvue2涓垜浠渶瑕侀€氳繃閫夐」components杩涜缁勪欢娉ㄥ唽锛岃€屽湪vue3涓紝鎴戜滑鍙互鐩存帴浣跨敤缁勪欢//vue2 import A from './a.vue'components:{ A}//vue3<template> <A/></template><script setup> import A from './a.vue'</script>鎸囦护锛歷ue2 VS vue3涓や釜鐗堟湰鐨勬寚浠ょ敤娉曞熀鏈浉鍚岋紝杩欓噷鎴戝彧鍒楀嚭vue3宸紓閮ㄥ垎v-modelvue2涓垜浠疄鐜颁竴涓嚜瀹氫箟v-model鍙互杩欐牱鍐?/ vue2props:{ title:{ type:String, default: 'molly' }},model: { prop: 'title', event: 'change',},methods:{ change(val){ this.$emit('input',val) }},vue3涓彲浠ュ畾涔塿-model鍙傛暟鍚嶏紝鍚屾椂杩樻敮鎸佽缃涓獀-model锛岀畝鐩寸編婊嬫粙// vue3props:{ title:{ type:String }, num:{ type:Number },},setup(props,{emit}){ function change1(val){ emit('update:title',val) } function change2(val){ emit('update:num',val) } return { change1, change2 }}// 鍦ㄧ埗缁勪欢涓娇鐢?lt;Son v-model:title="molly" v-model:num="18" />鏂板鎸囦护v-memo锛岃鎸囦护璁颁綇涓€涓ā鏉跨殑瀛愭爲銆傚厓绱犲拰缁勪欢涓婇兘鍙互浣跨敤銆傝鎸囦护鎺ユ敹涓€涓浐瀹氶暱搴︾殑鏁扮粍浣滀负渚濊禆鍊艰繘琛岃蹇嗘瘮瀵广€傚鏋滄暟缁勪腑鐨勬瘡涓€奸兘鍜屼笂娆℃覆鏌撶殑鏃跺€欑浉鍚岋紝鍒欐暣涓瀛愭爲鐨勬洿鏂颁細琚烦杩囥€傜浉褰撲簬鍐呭瓨鎹㈡椂闂达紝鐩稿悓娓叉煋鍐呭鍒欎粠鍐呭瓨璇诲彇銆傝繖瀵逛簬闀垮垪琛ㄥ満鏅緢鏈夌敤鍏朵粬鍙樻洿瀵逛簬聽v-if/v-else/v-else-if聽鐨勫悇鍒嗘敮椤孤爇ey聽灏嗕笉鍐嶆槸蹇呴』鐨勶紝鍥犱负鐜板湪 vue3 浼氳嚜鍔ㄧ敓鎴愬敮涓€鐨劼爇ey<template v-for>聽鐨劼爇ey聽搴旇璁剧疆鍦?lt;template>聽鏍囩涓?(鑰屼笉鏄缃湪瀹冪殑瀛愯妭鐐逛笂)銆備綔鐢ㄤ簬鍚屼竴涓厓绱犱笂鏃讹紝v-if聽浼氭嫢鏈夋瘮聽v-for聽鏇撮珮鐨勪紭鍏堢骇銆倂-on聽鐨劼?native聽淇グ绗﹀凡琚Щ闄ゃ€倂-for 涓殑 ref 涓嶅啀娉ㄥ唽ref鏁扮粍鍦ㄤ娇鐢╲-bind="object"涓庣粍浠剁嫭绔嬪睘鎬ч噸鍚嶆椂锛岄偅涔堢粦瀹氱殑澹版槑椤哄簭灏嗗喅瀹氬畠浠浣曡鍚堝苟銆備互鍚庤€呬负鏍囧噯<!-- 妯℃澘 --><div id="red" v-bind="{ id: 'blue' }"></div><!-- 缁撴灉 --><div id="blue"></div><!-- 妯℃澘 --><div v-bind="{ id: 'blue' }" id="red"></div><!-- 缁撴灉 --><div id="red"></div>缁勪欢閫氫俊锛歷ue2 VS vue3鍦╲ue2涓彁渚涗簡澶氱api渚涗互鎴戜滑杩涜缁勪欢閫氫俊锛歱rops / $emit / $on$attrs / $listenersprovide / inject$parent / $children / ref鍦╲ue3涓緷鐒舵敮鎸佸ぇ閮ㄥ垎api锛屽苟鍋氫簡閫傚綋璋冩暣绉婚櫎浜?on銆?off銆?once瀹炰緥鏂规硶绉婚櫎浜?children瀹炰緥property$attrs聽鐜板湪鍖呭惈浜嗘墍鏈変紶閫掔粰缁勪欢鐨?attribute锛屽寘鎷燾lass聽鍜屄爏tyle鍦?lt;script setup>聽涓繀椤讳娇鐢燿efineProps聽鍜屄燿efineEmits聽API 鏉ュ０鏄幝爌rops聽鍜屄爀mits聽锛屽畠浠叿澶囧畬鏁寸殑绫诲瀷鎺ㄦ柇骞朵笖鍦?lt;script setup>聽涓槸鐩存帴鍙敤鐨勬彃妲?vue2 VS vue3鍦ㄦ彃妲借繖涓€鍧椾袱涓増鏈熀鏈繚鎸佷竴鑷达紝娌℃湁澶鐨勬敼鍔紝杩樻槸淇濈暀鍘熸潵鐨勪娇鐢ㄦ柟寮忋€倂ue3鍋氫簡涓€鐐圭偣灏忔洿鏂皌his.$slots聽鐜板湪灏嗘彃妲戒綔涓哄嚱鏁板叕寮€绉婚櫎聽this.$scopedSlots浠ｇ爜澶嶇敤 vue2 VS vue3vue2涓唬鐮佸鐢ㄧ殑鎵嬫寰堝锛屼富瑕佹湁浠ヤ笅鍑犵鏂瑰紡缁勪欢鎶界鑷畾涔夋寚浠ゅ疄渚嬪叏灞€鎸傝浇鎻掍欢灏佽mixinextendvue3涓悓鏍锋兜鐩栦互涓婃墜娈碉紝骞跺仛浜嗙浉搴斾紭鍖栦笌鏇存柊瀹炰緥鍏ㄥ眬鎸傝浇杩欎竴鎵嬫鍦╲ue2涓紝鎴戜滑涓€鑸槸绠€鍗曠矖鏆寸殑閫氳繃prototype灏嗚涓哄璞℃寕杞藉埌vue鍘熷瀷涓婏紝杩欑鏂瑰紡铏界劧绠€鍗曟槑浜嗭紝浣嗘槸涔熷瓨鍦ㄥ叏灞€姹℃煋鐨勯棶棰樸€俈ue.prototype.$xxx = {name:'molly'}瀵瑰簲鍒皏ue3涓紝鍒欎笉鍏佽鎴戜滑杩欐牱瀛愬共锛屽彇鑰屼唬涔嬬殑鏄?app.config.globalPropertiesmixin涔熸槸浠ｇ爜澶嶇敤鐨勪竴澶у埄鍣紝涓嶈繃鐩稿簲鐨勪篃鏆撮湶鍑轰竴浜涢棶棰樸€傚綋mixin琚互鐢ㄦ垨澶ч噺浣跨敤鏃讹紝浼氬鑷翠緷璧栧叧绯讳笉鏄庣‘锛屼笉鏄撶淮鎶ゃ€傚湪vue3涓洿鎺ㄨ崘鎴戜滑浣跨敤鑷畾涔塰ooks鐨勬柟寮忔潵澶嶇敤浠ｇ爜銆傚疄鐜颁竴涓嚜瀹氫箟hooks鎴戜滑鍙互鎶婁竴涓姛鑳界浉鍏崇殑鏁版嵁鍜岄€昏緫閮芥娊绂诲嚭鏉ユ斁鍒颁竴璧风淮鎶わ紝渚嬪瀹炵幇涓€涓疮鍔犲櫒import {ref, onUnmounted} from 'vue'export function useAccumulator(){ const count = ref(0) let timer = null timer = setInterval(()=>{ count.value ++ },1000) onUnmounted(()=>{ clearInterval(timer) }) return {count}}鎴戜滑瀹氫箟浜嗕竴涓疮鍔犲櫒鐨刪ooks鍑芥暟锛屽湪缁勪欢鍏ュ彛灏卞彲浠ュ儚鏅€氬嚱鏁颁竴鏍蜂娇鐢╱seAccumulator()import {useAccumulator} from '../utils'let {count} = useAccumulator()script setup 琛ュ厖璐翠笂瀹樼綉鐨勬弿杩?lt;script setup>聽鏄湪鍗曟枃浠剁粍浠?(SFC) 涓娇鐢ㄧ粍鍚堝紡 API鐨勭紪璇戞椂璇硶绯栥€傜浉姣斾簬鏅€氱殑聽<script>聽璇硶锛屽畠鍏锋湁鏇村浼樺娍锛氭洿灏戠殑鏍锋澘鍐呭锛屾洿绠€娲佺殑浠ｇ爜銆傝兘澶熶娇鐢ㄧ函 Typescript 澹版槑 props 鍜屾姏鍑轰簨浠躲€傛洿濂界殑杩愯鏃舵€ц兘 (鍏舵ā鏉夸細琚紪璇戞垚涓庡叾鍚屼竴浣滅敤鍩熺殑娓叉煋鍑芥暟锛屾病鏈変换浣曠殑涓棿浠ｇ悊)銆傛洿濂界殑 IDE 绫诲瀷鎺ㄦ柇鎬ц兘 (鍑忓皯璇█鏈嶅姟鍣ㄤ粠浠ｇ爜涓娊绂荤被鍨嬬殑宸ヤ綔)銆?lt;script setup>聽涓烘垜浠甫鏉ヤ簡鏋佸ぇ鐨勪究鍒╋紝浼樺娍濡備笅锛氭墍鏈夐《灞傜粦瀹氬彉閲忓唴瀹归兘鑳藉湪妯℃澘涓洿鎺ヤ娇鐢?lt;script setup>聽鑼冨洿閲岀殑鍊间篃鑳借鐩存帴浣滀负鑷畾涔夌粍浠剁殑鏍囩鍚嶄娇鐢紝鐩稿綋浜庢垜浠彲浠ヤ笉鐢ㄩ€氳繃components聽娉ㄥ唽缁勪欢鏀寔浣跨敤:is鏉ョ粦瀹氬姩鎬佺粍浠舵敮鎸侀《灞俛wait锛屽厛姣擩avaScript涓€姝ュ疄鐜拌繖涓壒鎬э紝灏辨槸鐖藉己澶х殑style鐗规€у己澶х殑style鐗规€ф槸vue3鐨勫張涓€涓鍏靛埄鍣ㄦ繁搴﹂€夋嫨鍣ㄤ负浜嗕娇缁勪欢涔嬮棿鏍峰紡浜掍笉褰卞搷锛屾垜浠彲浠ヨ繖鏍峰啓<style scoped>锛屽綋澶勪簬scoped涓嬫兂鍋氭繁搴﹂€夋嫨鏃讹紝鍙互浣跨敤:deep()浼被<style scoped>.a :deep(.b) { ...}</style>鎻掓Ы閫夋嫨鍣ㄩ粯璁ゆ儏鍐典笅锛屼綔鐢ㄥ煙鏍峰紡涓嶄細褰卞搷鍒?lt;slot/>鍐呭锛屽彲浠ヤ娇鐢?slotted浼被鏉ラ€夋嫨鍒版彃妲?slotted(div) { color: red;}鍏ㄥ眬閫夋嫨鍣ㄥ彲閫氳繃:global浼被鏉ュ疄鐜板叏灞€鏍峰紡:global(.red) { color: red;}css module鐨勬敮鎸佸彲閫氳繃<style module>鏂瑰紡灏哻ss绫讳綔涓?style瀵硅薄鏆撮湶鍑烘潵缁欑粍浠朵娇鐢紝鍚屾椂涔熸敮鎸佽嚜瀹氫箟鍚嶇О锛?lt;style module=鈥渕olly鈥?><template> <p :class="molly.red">red</p></template><style module="molly">.red { color: red;}</style>鐘舵€侀┍鍔ㄧ殑鍔ㄦ€乧ss杩欐槸鎴戣涓烘渶鏂逛究鐨勪竴涓壒鎬э紝鍙互璁╂垜浠皯鍐欏緢澶氫唬鐮侊紝闈炲父鐖藉湪style涓厑璁告垜浠娇鐢╲-bind鏉ュ皢css鍊煎姩鎬佸叧鑱斿埌缁勪欢涓?lt;template> <div class="text">hello</div></template><script>export default { data() { return { color: 'red' } }}</script><style>// v-bind鍙互鐩存帴寮曞叆script涓殑鍝嶅簲鏁版嵁浣滀负鍊?text { color: v-bind(color);}</style>濂藉暒锛屾€荤粨鑷虫搴旇鍙互杞绘澗涓婃墜vue3椤圭洰浜嗭紝鍠滄鐨勫皬浼欎即娆㈣繋鐐硅禐鐣欒█璁ㄨ銆傜偣璧炶秴杩?0鎴戝皢鎸佺画鏇存柊宸紓鍖栧姣攙ue-router4.x 鍜寁uex 4.x 绯诲垪鎰熻阿鎾掕姳鉁库溈銉?掳鈻铰?銉庘溈鐐瑰嚮鍏虫敞鎴戣鎴戜滑鎹釜濮垮娍鐜╁効鍓嶇锛屾効浣犱竴璺墠琛岋紝鐪奸噷鏈夊厜锛佹拻鑺扁溈鉁裤兘(掳鈻铰?銉庘溈
