【推荐收藏】通过差异化的对比学习方式,带你温习Vue2,快速掌握Vue3
时间:2023-03-28 18:25:45
HTML
銆傚綋鎴戜滑鎯冲湪scoped涓嬭繘琛屾繁搴﹂€夋嫨鏃讹紝鍙互浣跨敤锛歞eep()pseudo-class.a:deep(.b){...}鍠傚杺鍠傦紒鎴戞槸鐚姏MollyVue3宸茬粡鍙戝竷涓€娈垫椂闂翠簡锛屼篃寰楀埌浜嗗悇澶у巶鍟嗗拰绀惧尯鐨勬敮鎸佸拰浼楀寮€鍙戣€呯殑鍠滅埍锛屽懆杈圭敓鎬佷篃鍦ㄩ€愭瀹屽杽涓€傚彲璋撴槸鐩涗笘缇庨銆傛湰鏂囨棬鍦ㄩ€氳繃姊崇悊Vue2甯哥敤API锛屽姣擵ue3宸紓鍖栵紝甯姪澶у蹇€熸帉鎻ue3銆備袱涓叧閿洜绱犱績浣挎垜浠€冭檻涓烘柊鐨勪富瑕佺増鏈噸鍐橵ue锛氫富瑕佹祻瑙堝櫒瀵规柊JavaScript璇█鍔熻兘鐨勫箍娉涙敮鎸併€傞殢鐫€鏃堕棿鐨勬帹绉伙紝褰撳墠Vue浠g爜搴撴毚闇茬殑璁捐鍜屾灦鏋勯棶棰樸€傛洿璇︾粏鐨勫唴瀹癸紝鎴戜滑鍙互鍦ㄧ煡涔庡惉涓€鍚父闆ㄧ啓澶у笀浜茬瑪绛惧悕鍥炵瓟锛氫粠澶村紑濮嬮噸鍚殑Vue3甯︽潵浜嗕粈涔堬紵vue2VSvue3(codingmotionsense)鏈€杩戝仛浜嗕竴涓叧浜庘€滃叡浜┐鍎胯溅鈥濈殑鍚庡彴绠$悊绯荤粺椤圭洰銆傜敱浜庢槸鏂伴」鐩紝鎵€浠ユ垜澶ц儐閫夋嫨浜唙ue3+vite+typescript+elementplus浣滀负鍩虹鎶€鏈爤銆備絾鏄洰鍓嶅競闈笂杩樻病鏈夊厤璐瑰ソ鐢ㄧ殑涓悗鍙板熀纭€妯℃澘妗嗘灦锛屾墍浠ヨ窡鐫€鍐呰¥澶т浆鐨勪紶閫侀棬锛歷ue-admin-template锛屽啓浜嗕竴涓獀ue3鐗堟湰鐨剉ue-element-admin骞跺簲鐢ㄥ埌瀹為檯椤圭洰涓€傚氨鎴戜釜浜虹殑缂栫爜涔犳儻鑰岃█锛岀浉姣攙ue2鐨凮ptionapi鐨勭洿瑙傛€э紝vue3鐨凜ompositionapi鍙互鏇村ソ鐨勭粍缁囦唬鐮侊紝鏀寔鑷畾涔塰ooks瀹炵幇浠g爜澶嶇敤锛屼粠鑰屾浛浠ixins銆傚湪浠g爜椋庢牸涓婏紝涔熷彲浠ユ妸绫讳技鐨勪笟鍔¢€昏緫鍐欐垚涓€涓唬鐮佸潡锛岄伩鍏嶄唬鐮佸垎鏁o紝璧拌浠g爜闇€瑕佸弽澶嶄笂涓嬭烦鍔ㄣ€傚TS鏇村弸濂界殑鏀寔鍜屽緢澶氭柊鐗规€х殑鍔犲叆涔熻vue3鏇村鏄撶紪鍐欙紝鏇存湁鍒╀簬浠g爜鐨勭淮鎶ゅ拰鎵╁睍銆傜粨鍚坴ite锛屽ぇ澶ф彁鍗囦簡寮€鍙戜綋楠屻€傛€荤殑鏉ヨ锛岃鎴戜滑涓€璧锋嫢鎶眝ue3锛岀粰vue鍥㈤槦鐐逛釜璧炲惂馃憤馃憤馃憤vue3鏇寸洿瑙傜殑鏂扮壒鎬ф柊鐨凜ompositionapi璁╂垜浠彲浠ョ敤涓嶅悓鐨勬柟寮忕粍缁囦唬鐮?scriptsetup>璇硶绯栬浠g爜鏇寸畝娲佺渷鍘诲幓鎺夋ā鏉跨殑鏍瑰厓绱犲寘瑁呮爣绛炬彁渚涗簡涓€涓柊鐨勫唴缃粍浠?teleport>锛屽畠鏀寔鍙互鎸傝浇鍒颁换浣昫om鑺傜偣鐨勭粍浠躲€傛彁渚涘湪css涓娇鐢╲-bind寮曞叆鑴氭湰鍙橀噺锛屽彟涓€涓己澶х殑榛戦瓟娉曚娇鐢╟reateApp鍒涘缓搴旂敤瀹炰緥銆傛洿鍙嬪ソ鐨凾S鏀寔浣跨敤浠g悊鏇挎崲defineproperty鍏ㄥ眬鍜屽唴閮ˋPI銆傚畠宸茶閲嶆瀯浠ユ敮鎸乼ree-shakeoptionapiVScompositionapi銆侰ompositionapi鏄痸ue3鐨勪竴澶х壒鑹诧紝vue3鏆撮湶浜嗗ぇ閲忕殑鍔熻兘渚涙垜浠寜闇€鍙傝€冿紝鍦╫ptionapi涓嚜鐢辩粍鍚堬紝鎴戜滑瀹炰緥鍖朧ue骞跺皢琛屼负瀵硅薄浣滀负鍙傛暟浼犲叆newVue({data(){return{}},methods:{},computed:{},created(){},...})鍦–ompositionapi涓紝鎴戜滑鍙互浣跨敤setup浣滀负鍏ュ彛鍑芥暟锛岃繑鍥炰竴涓鏆撮湶鐨勫璞℃暟鎹ā鏉夸娇鐢?template>{{msg}}
setup杩樻敮鎸佸彟涓€绉嶅啓娉曪紝鏇村姞绠€鍖栦簡浠g爜
{{msg}}鐖剁粍浠舵柊澧炴坊鍔犱簡鎸囦护v-memo锛屽畠浼氳浣忔ā鏉跨殑瀛愭爲鍏冪礌骞跺彲鐢ㄤ簬缁勪欢銆傛鍛戒护鎺ュ彈鍥哄畾闀垮害鏁扮粍浣滀负鍐呭瓨姣旇緝鐨勭浉鍏冲€笺€傚鏋滄暟缁勪腑鐨勬瘡涓€奸兘涓庝笂娆℃覆鏌撴椂鐩稿悓锛屽垯灏嗚烦杩囨暣涓瓙鏍戠殑鏇存柊銆傜浉褰撲簬鍐呭瓨浜ゆ崲鏃堕棿锛屼粠鍐呭瓨涓鍙栫浉鍚岀殑娓叉煋鍐呭銆傝繖瀵逛簬闀垮垪琛ㄥ満鏅緢鏈夌敤鍏朵粬涓嶅啀闇€瑕佸v-if/v-else/v-else-if鐨勬瘡涓垎鏀」key杩涜鏀瑰姩锛屽洜涓虹幇鍦╲ue3浼氳嚜鍔ㄧ敓鎴愬敮涓€鐨刱ey
key搴旇鍦?template>鏍囩涓婅缃紙鑰屼笉鏄湪瀹冪殑瀛愭爣绛句笂锛夈€傚綋浣滅敤浜庡悓涓€涓厓绱犳椂锛寁-if浼氭瘮v-for鏈夋洿楂樼殑浼樺厛绾с€倂-on鐨?native淇グ绗﹀凡琚Щ闄ゃ€倂-for涓殑ref涓嶅啀娉ㄥ唽ref鏁扮粍銆傚綋浣跨敤涓庣粍浠剁殑鐙珛灞炴€у悓鍚嶇殑v-bind="object"鏃讹紝缁戝畾鐨勫0鏄庨『搴忓皢鍐冲畾瀹冧滑濡備綍鍚堝苟銆傚悗鑰呮槸鏍囧噯鐨?!--template-->divid="red">缁勪欢閫氫俊锛歷ue2VSvue3鍦╲ue2涓彁渚涗簡澶氱API渚涙垜浠笌缁勪欢閫氫俊锛歱rops/$emit/$on$attrs/$listenersprovide/inject$parent/$children/ref浠嶇劧鏀寔vue3涓殑澶ч儴鍒咥PI锛屽苟鍋氫簡閫傚綋鐨勮皟鏁寸Щ闄や簡$on,$off,$once瀹炰緥鏂规硶绉婚櫎浜?children瀹炰緥灞炴€?attrs鐜板湪鍖呭惈浜嗕紶閫掔粰缁勪欢鐨勬墍鏈夊睘鎬э紝鍖呮嫭璇硶鐩告瘮锛屽畠鏈夋洿澶氱殑浼樺娍锛氭牱鏉垮唴瀹规洿灏戯紝浠g爜鏇寸畝娲併€傝兘澶熶娇鐢ㄧ函Typescript澹版槑props鍜屾姏鍑轰簨浠躲€傛洿濂界殑杩愯鏃舵€ц兘锛堝畠鐨勬ā鏉垮皢琚紪璇戞垚涓庡叾鐩稿悓鑼冨洿鍐呯殑娓叉煋鍑芥暟锛屾病鏈変换浣曚腑闂翠唬鐞嗭級銆傛洿濂界殑IDE绫诲瀷鎺ㄦ柇鎬ц兘锛堣瑷€鏈嶅姟鍣ㄤ粠浠g爜涓彁鍙栫被鍨嬬殑宸ヤ綔鏇村皯锛夈€?scriptsetup>缁欐垜浠甫鏉ヤ簡寰堝ぇ鐨勬柟渚裤€備紭鐐瑰涓嬶細鎵€鏈夐《灞傜粦瀹氬彉閲忓唴瀹归兘鍙互鐩存帴鍦ㄦā鏉夸腑浣跨敤銆?scriptsetup>鑼冨洿鍐呯殑鍊间篃鍙互鐩存帴浣滀负鑷畾涔夌粍浠剁殑鏍囩鍚嶏紝鐩稿綋浜庢垜浠笉闇€瑕侀€氳繃缁勪欢娉ㄥ唽缁勪欢鏉ユ敮鎸乽sing锛氬氨鏄粦瀹氬姩鎬佺粍浠舵潵鏀寔top-绾х瓑寰呫€傝繖涓壒鎬ф瘮JavaScript鍏堜竴姝ュ疄鐜帮紝寰堥叿寰堝己澶с€傚己澶х殑鏍峰紡鐗规€ф槸vue3鐨勫張涓€娉曞疂銆侱epthSelector涓轰簡璁╃粍浠剁殑鏍峰紡鐩镐簰鐙珛锛屾垜浠彲浠ヨ繖鏍峰啓銆傚綋鎴戜滑鎯冲湪scoped涓嬭繘琛屾繁搴﹂€夋嫨鏃讹紝鍙互浣跨敤锛歞eep()pseudo-class.a:deep(.b){...}slotselector涓嶅奖鍝?slot/>鍐呭锛屽彲浠ヤ娇鐢?slotted浼被鏉ラ€夋嫨slot:slotted(div){color:red;}鍏ㄥ眬閫夋嫨鍣ㄥ彲浠ラ€氳繃:global浼被瀹炵幇鍏ㄥ眬鏍峰紡锛歡lobal(.red){color:red;}css妯″潡鐨勬敮鎸佸彲浠ラ€氳繃鏂规硶灏哻ss绫讳綔涓?style瀵硅薄鏆撮湶缁欑粍浠朵娇鐢紝涔熸敮鎸佽嚜瀹氫箟鍚嶇О锛?stylemodule="molly">red.red{color:red;}鐘舵€侀┍鍔ㄧ殑鍔ㄦ€乧ss杩欐槸鎴戣涓烘渶鏂逛究鐨勫姛鑳姐€傚畠鍙互璁╂垜浠皯鍐欏緢澶氫唬鐮侊紝杩欓潪甯搁叿銆係tyle鍏佽鎴戜滑浣跨敤v-bind鍔ㄦ€佸叧鑱攃ss鍊艰浆鍒扮粍浠?template>helloOK锛岀患涓婃墍杩帮紝vue3椤圭洰搴旇寰堝鏄撲笂鎵嬨€傚枩娆㈢殑鏈嬪弸娆㈣繋鐐硅禐銆佽瘎璁恒€佽璁虹偣璧?0涓互涓婏紝鎴戜細鎸佺画鏇存柊vue-router4.x鍜寁uex4.x绯诲垪鐨勫尯鍒拰瀵规瘮銆偮?銉庘溈鐐瑰嚮鍏虫敞鎴戯紝璁╂垜浠崲涓Э鍔跨帺鍓嶇銆傛効浣犱竴璺蛋鏉ワ紝鐪奸噷鏈夊厜锛侀矞鑺扁溈鉁裤兘(掳鈻铰?銉庘溈