vue3.0鐨勫悇绉嶆€ц兘杩樻槸寰堜笉閿欑殑銆備笌vue2.0鐩告瘮锛岀‘瀹炴槸涓婁簡涓€涓彴闃躲€傛嵁璇村鎴风娓叉煋鏁堢巼姣攙ue2楂?.3~2鍊嶏紝SSR娓叉煋鏁堢巼姣攙ue2楂?~2鍊嶃€?娆°€傞潰璇曟椂涔熷彲鑳戒細琚棶鍒般€傪煋岄潤鎬佸崌绾ue涓湁缂栬瘧鍣紝vue3鐨刾ackage.json鏂囦欢涓湁@vue/compiler-sfc锛寁ue2涓湁vue-template-compiler锛岃繖涓や釜鏄紪璇戝櫒锛屼細缂栬瘧鎴戜滑鐨則emplate涓簉ender鍑芥暟锛寁ue3涓殑缂栬瘧鍣ㄩ潪甯告櫤鑳姐€傚湪缂栬瘧杩囩▼涓紝瀹冨彲浠ユ壘鍑哄摢浜涜妭鐐规槸闈欐€佽妭鐐癸紝浠€涔堟槸闈欐€佽妭鐐癸紵闈欐€佽妭鐐规槸涓€涓厓绱犺妭鐐癸紝杩欎釜鑺傜偣涓病鏈夊姩鎬佸唴瀹癸紝涔熷氨鏄娌℃湁缁戝畾鍔ㄦ€佸睘鎬с€傝繖涓彨鍋氶潤鎬佽妭鐐癸紝姣斿锛?template>涓婇潰浠ｇ爜涓殑img鏄竴涓潤鎬佽妭鐐癸紝瀹冩病鏈夌粦瀹氫换浣曞姩鎬佸唴瀹癸紝浣嗘槸vue3缂栬瘧鍣ㄤ細鎵惧埌闈欐€佽妭鐐癸紝鐒跺悗鍗囩骇瀹冿紝浣嗘槸鍦╲ue2涓苟涓嶅叧蹇冨畠鏄潤鎬佽妭鐐硅繕鏄竴涓姩鎬佽妭鐐癸紝鎿嶄綔鐚涘铏庛€備笅闈㈠姣斾竴涓嬶細//vue2鐨勯潤鎬佽妭鐐箁ender(){//鍒涘缓涓€涓櫄鎷熻妭鐐筯1锛屾病鏈変换浣曞睘鎬э紝鍙湁鍐呭鏄€渇orensic鈥濓紝缂栬瘧鍚?h1>forensiccreateVNode("h1",null,"娉曞尰");//....鍏朵粬浠ｇ爜}//vue3鐨勯潤鎬佽妭鐐筩onsthoisted=createVNode("h1",null,"forensic");functionrender(){//鐩存帴浣跨敤hoisted鍗冲彲}鍦╲ue3涓紝璁や负鏃㈢劧杩欐槸涓€涓潤鎬佽妭鐐癸紝鑲畾涓嶄細鍙樼殑锛屼笉鍙兘璇磋繖娆1鍏冪礌鐨勫唴瀹瑰彇璇侊紝涓嬫h2鍏冪礌鐨勫唴瀹规槸鍒殑锛屾墍浠ue3璁や负鏃㈢劧鏄竴涓潤鎬佽妭鐐癸紝涓嶉渶瑕佸湪render鍑芥暟涓垱寤猴紝鍥犱负涓€鏃︽暟鎹彂鐢熷彉鍖栵紝render鍑芥暟浼氬弽澶嶈繍琛岋紝鐒跺悗閲嶆柊鍒涘缓闈欐€佽妭鐐癸紝鎵€浠ヤ负浜嗘彁楂樻晥鐜囷紝鍦╲ue3涓紝浼氬崌绾taticnode鍒皉ender鍑芥暟涔嬪锛岃繖鏍烽潤鎬佽妭鐐瑰彧浼氳鍒涘缓涓€娆★紝鐒跺悗鐩存帴鍦╮ender鍑芥暟涓娇鐢ㄥ畠銆傜ず渚嬶細杩愯涓€涓柊寤虹殑vue3椤圭洰锛屽湪鎺у埗鍙板彲浠ユ竻妤氱殑鐪嬪埌闈欐€佽妭鐐瑰凡缁忔彁鍗囧埌澶栭儴浜嗐€傝繖灏辨槸闈欐€佽妭鐐圭殑鎻愬崌銆傚叾瀹炰笉浠呴潤鎬佽妭鐐逛細琚彁鍗囷紝闈欐€佸睘鎬т篃浼氳鎻愬崌锛宱k锛屾垜浠潵鐪嬩竴涓嬶細渚嬪瓙锛氳繖鏄痸ue3鏂板缓椤圭洰涓殑APP.vue缁勪欢锛屾坊鍔犱竴涓猦1鍏冪礌鑺傜偣锛宲ay娉ㄦ剰闈欐€佽妭鐐癸紝鏄姩鎬佺殑锛屽洜涓哄唴瀹规槸鍔ㄦ€佺殑锛屽彧鏈夊睘鎬ф槸闈欐€佺殑//APP.vue浠ｇ爜鏁堟灉濡備笅锛氿煃掗瀛楃涓插寲鐪熺殑寰堝己澶э紝鐗瑰埆浣╂湇锛屾垜浠彲浠ュ洖鎯充竴涓嬪湪骞虫椂鐨刅ue寮€鍙戣繃绋嬩腑锛岀粍浠朵腑鐨勫姩鎬佸厓绱犲苟涓嶅锛屽ぇ閮ㄥ垎閮芥槸闈欐€佸厓绱犮€備妇涓牀瀛愷煂帮細

Forensic