当前位置: 首页 > Web前端 > vue.js

Vue编码优化就是

时间:2023-04-01 11:10:57 vue.js

鎬ц兘浼樺寲鏈韩灏辨槸涓€涓緢澶х殑璇濋锛屽苟娌℃湁涓€涓浐瀹氱殑鍏紡銆傛渶濂藉湪鍏蜂綋鐨勯」鐩腑鍒嗘瀽锛屽苟涓嶆槸璇翠竴瀹氳鍦ㄩ」鐩腑浣跨敤浼樺寲鎶€鏈€傛湰鏂囦富瑕佽璁瞯ue缂栫爜闃舵甯歌鐨勪紭鍖栨柟娉曫煍戜娇鐢╧ey鍏充簬key鏈枃璁茶Вvue鐨刣iff绠楁硶銆傛嵁璇村湪姣旇緝鏂版棫铏氭嫙鑺傜偣鏃讹紝閿€煎彲浠ヨ瘑鍒櫄鎷熻妭鐐广€傚綋鏄瓙鑺傜偣鏃讹紝闇€瑕佹洿鏂版棫铏氭嫙鑺傜偣鍒楄〃涓庢柊铏氭嫙鑺傜偣鐩稿悓鐨勮妭鐐广€傚鏋滃湪姣旇緝鐨勬椂鍊欒缃甼ey鍊硷紝姣旇緝浼氬揩寰堝銆傚浜庡惊鐜敓鎴愮殑鍒楄〃锛屽簲璇ヤ负姣忎釜鍒楄〃椤规坊鍔犱竴涓ǔ瀹氫笖鍞竴鐨勯敭锛岃繖鏍峰綋鍒楄〃鍙戠敓鍙樺寲鏃讹紝灏藉彲鑳藉皯鍦板垹闄ゃ€佹坊鍔犳垨鏇存敼鍏冪礌銆傪煡朵娇鐢ㄥ喕缁撳璞′粈涔堟槸鍐荤粨瀵硅薄锛熷喕缁撳璞″叾瀹炲氨鏄€氳繃Object.freeze锛堜紶閫掍竴涓璞★級鏉ュ喕缁撳璞°€傚喕缁撳悗锛岃繖涓璞$殑灞炴€т笉鑳戒慨鏀瑰拰娣诲姞锛屾槸涓嶅彲鍙樼殑銆傚綋鐒讹紝鏁扮粍涔熷彲浠ヨ鍐荤粨銆傚埆鎯充簡锛屽洜涓哄喕缁撳璞℃槸涓嶅彲鍙樼殑锛孷ue浼氫紭鍖栧喕缁撳璞★紝Vue涓嶄細鎶婂喕缁撳璞″鐞嗘垚鍝嶅簲寮忕殑銆傚湪瀹為檯鐨勯」鐩紑鍙戜腑锛屾垜浠彲鑳戒細澶勭悊涓嶄細鏀瑰彉鐨勬暟鎹€傚畠鍙渶瑕佸憟鐜板湪椤甸潰涓婏紝鍥犳涓嶉渶瑕佽繖浜涙暟鎹彉鎴愬搷搴斿紡鐨勩€傝繖鏃跺€欎娇鐢ㄥ喕缁撳璞″彲浠ュ噺灏慥ue杩欐灏嗗璞″彉鎴愬搷搴斿紡鍏紡娴佺▼鐨勯渶瑕併€傚綋鐒讹紝瀹冧篃鏈変竴涓己鐐癸紝灏辨槸浠ュ悗濡傛灉瑕佷慨鏀瑰璞′腑鐨勬暟鎹紝鍥犱负瀹冧笉鏄搷搴斿紡鐨勶紝鎵€浠ヤ笉浼氭覆鏌撳埌椤甸潰涓娿€傗彸浣跨敤璁$畻灞炴€у鏋滄ā鏉夸腑鐨勬煇涓暟鎹細琚娆′娇鐢紝骞朵笖鏁版嵁鏄€氳繃璁$畻寰楀埌鐨勶紝灏介噺浣跨敤璁$畻灞炴€с€傛垜浠兘鐭ラ亾璁$畻灞炴€ф槸鏈夌紦瀛樼殑锛岃绠楀睘鎬у嚱鏁版墍渚濊禆鐨勬暟鎹槸涓嶄細鏀瑰彉鐨勩€傝繖绉嶆儏鍐典笅浼氶噸澶嶈鍙栫紦瀛樼殑鏁版嵁锛屼絾鏄笉浼氶噸澶嶆墽琛岃绠楀嚭鐨勫睘鎬у嚱鏁帮紝浣嗘槸涔熸湁涓嶈兘浼犻€掑弬鏁扮殑缂虹偣銆傪煋滈潪瀹炴椂缁戝畾琛ㄥ崟椤瑰湪浣跨敤v-model缁戝畾琛ㄥ崟椤规椂锛屽綋鐢ㄦ埛鏀瑰彉琛ㄥ崟椤圭殑鐘舵€佹椂锛屾暟鎹篃浼氶殢涔嬫敼鍙橈紝杩欎細瀵艰嚧Vue閲嶆柊娓叉煋锛坮erender锛夛紝杩欎細甯︽潵涓€浜涙€ц兘寮€閿€銆傜壒鍒槸褰撶敤鎴锋敼鍙樿〃鍗曢」鏃讹紝椤甸潰鏈変竴浜涘姩鐢绘鍦ㄨ繘琛岋紝鍥犱负JS鎵ц绾跨▼鍜屾祻瑙堝櫒娓叉煋绾跨▼鏄簰鏂ョ殑锛屾渶缁堜細瀵艰嚧鍔ㄧ敾鍗′綇銆傛垜浠彲浠ラ€氳繃浣跨敤lazy鎴栬€呬笉浣跨敤v-model鏉ヨВ鍐抽棶棰橈紝浣嗘槸瑕佹敞鎰忚繖鍙兘浼氬鑷翠竴瀹氭椂闂村唴鏁版嵁鍜岃〃鍗曢」鐨勫€间笉涓€鑷淬€備竴涓畝鍗曠殑渚嬪瓙锛氬湪鍒楄〃涓彃鍏ヤ换鍔℃椂锛屾垜浠洿鎺ヤ娇鐢╲-model杩涜鍙屽悜缁戝畾鏃讹紝鍏堜笉鍔爈azy淇グ绗︼紝鐒跺悗璋冩暣transition杩囨浮鏃堕棿涓?s鏁堟灉濡備笅锛氭垜浠彲浠ユ竻妤氱殑鐪嬪埌锛屽湪娣诲姞涓€娈靛唴瀹圭殑鏃跺€欙紝杩炵画杈撳叆鍐呭浼氬鑷撮〉闈㈡覆鏌撳彉鎱紝閭d箞缁檝鍔犱笂lazy淇グ绗?model鐪嬬湅锛屽拰涓嶅姞鏄笉鏄緢涓嶄竴鏍佛煒傪煃敤v-show浠f浛v-if瀵逛簬棰戠箒鍒囨崲鏄剧ず鐘舵€佺殑鍏冪礌锛屼娇鐢╲-show鍙互淇濊瘉铏氭嫙dom鏍戠殑绋冲畾鎬э紝閬垮厤棰戠箒鍔犱互鍙婂垹闄ゅ厓绱狅紝灏ゅ叾鏄妭鐐瑰唴閮ㄥ寘鍚ぇ閲廳om鍏冪礌鏃娥煃勫欢杩熷姞杞斤紙defer锛変富瑕佺敤浜庤В鍐崇櫧灞忛棶棰樸€傞椤电櫧灞忔椂闂翠富瑕佸彈涓や釜鍥犵礌褰卞搷锛氬寘澶ぇ鍖呭お澶ф秷鑰楀ぇ浼犺緭鏃堕棿闀匡紝瀵艰嚧椤甸潰鍓嶅彧鏈変竴涓?div>js浼犺緭瀹屾垚锛屾病鏈夊唴瀹规樉绀恒€傞渶瑕佺珛鍗虫覆鏌撶殑鍐呭澶JS浼犺緭瀹屾垚鍚庯紝娴忚鍣ㄥ紑濮嬫墽琛孞S鏋勫缓椤甸潰銆備絾鏄竴寮€濮嬪彲鑳介渶瑕佹覆鏌撶殑缁勪欢杩囧锛屼笉浠呬細瀵艰嚧Js鎵ц鏃堕棿杩囬暱锛岃繕浼氬鑷存墽琛屽悗娴忚鍣ㄦ覆鏌撶殑鍏冪礌杩囧锛屽鑷寸櫧灞忚繃澶у寘瑁呬綋绉€傞渶瑕佽嚜宸变紭鍖栨墦鍖呬綋绉紝杩欓噷鍏堜笉璇达紝鍏堣娓叉煋鍐呭杩囧鐨勯棶棰樸€備竴涓彲琛岀殑鍔炴硶鏄欢杩熷姞杞界粍浠讹紝璁╃粍浠舵寜鐓ф寚瀹氱殑椤哄簭涓€涓竴涓覆鏌撱€傚欢杩熷姞杞芥槸涓€绉嶆€濊矾锛屾湰璐ㄤ笂鏄埄鐢╮equestAnimationFrame浜嬩欢鏉ユ壒閲忔覆鏌撳唴瀹癸紝鍏蜂綋瀹炵幇鏂瑰紡澶氱澶氭牱銆傪煃塳eep-alive缁勪欢鍏充簬keep-alive锛屽彲浠ョ湅杩欑瘒鏂囩珷锛氳璇﹁Вkeep-alive缁勪欢鐨勪綔鐢ㄥ拰鍘熺悊馃崓浣跨敤闀垮垪琛ㄤ紭鍖栨湁鏃跺€欐垜浠渶瑕佸湪椤甸潰涓婂睍绀轰竴涓壒鍒暱鐨勫垪琛紝杩欑鎯呭喌涓昏鏄彂鐢熷湪绉诲姩绔垨鑰呭悗鍙扮鐞嗛〉闈紝缁忓父鏈変笅鎷夊埛鏂扮Щ鍔ㄧ鍐呭鐨勫姛鑳斤紝涓嶆柇鍚戜笂婊氬姩锛岀粨鏉熷悗浼氬姞杞芥洿澶氱殑鍐呭锛屽鑷村垪琛ㄥ厓绱犺緝澶氾紝瀵艰嚧椤甸潰鍥犱负鍏冪礌澶锛屾祻瑙堝櫒娓叉煋涔熼渶瑕佹椂闂达紝灏ゅ叾鏄綋鍔犲叆涓€浜涙柊鐨勫厓绱犳椂锛屼篃浼氳Е鍙戞祻瑙堝櫒鐨勯噸鎺掑拰閲嶇粯锛屾墍浠ユ棤璁烘槸鍐呭瓨鍗犵敤杩樻槸GPU娓叉煋锛岄兘浼氬甫鏉ユ€ц兘闂.鏉ヤ竴浜涙崯澶便€備妇涓牀瀛愷煂帮細鍋囪鎴戜滑闇€瑕佹覆鏌撻〉闈㈤暱鍒楄〃涓殑10000鏉℃暟鎹紝浠g爜濡備笅锛?/APP.vue//缁勪欢Listltem.vue