鈥斺€斿湪闈㈣瘯鐨勮繃绋嬩腑锛屼篃鍙兘浼氳闂埌浣犲virtualdom鐨勭悊瑙ｃ€傚儚杩欐牱鐨勯潰璇曢姣旇緝瀹芥硾銆傞潰璇曞畼鎯崇煡閬撲綘鐭ラ亾澶氬皯锛熸棦鐒舵槸浜嗚В锛岄偅灏卞彧鑳芥病瀹屾病浜嗭紝灏介噺缁勭粐璇█澶氳锛岃繖鏍锋樉寰椾笓涓氬害姣旇緝楂樸€傛帴涓嬫潵锛屾垜璇磋鎴戣嚜宸辩殑鐞嗚В銆傚垏璁颁笉瑕佹璁扮‖鑳岋紝涓€瀹氳鐞嗚В鍚庯紝鐢ㄨ嚜宸辩殑璇濇弿杩般€傛垜浠彲浠ヤ粠浠ヤ笅鍥涗釜鏂归潰鏉ュ洖绛旓細馃専浠€涔堟槸virtualdomvirtualdom鏈川涓婃槸涓€涓櫘閫氱殑JS瀵硅薄锛岀敤鏉ユ弿杩皏iew涓婂簲璇ユ湁浠€涔堟牱鐨勭晫闈㈢粨鏋勶紝骞朵笉鐢熸垚鐣岄潰銆傛垜浠彲浠ュ湪鐢熷懡鍛ㄦ湡鐨刴ounted闃舵鎵撳嵃this._vnode锛屽涓嬶細鎻忚堪浜嗘爣绛句负div锛屾湁鍝簺灞炴€э紝鏈夊摢浜涘瓙鍏冪礌绛夛紝浠ユ櫘閫歫s鐨勫舰寮忔弿杩伴〉闈㈠簲璇ユ湁浠€涔坥bjects锛屼絾娌℃湁鐢熸垚UI銆傚湪Vue涓紝姣忎釜缁勪欢閮芥湁涓€涓猺ender鍑芥暟锛屾瘡涓猺ender鍑芥暟杩斿洖涓€涓櫄鎷烡OM缂栧彿锛屼篃灏辨槸璇存瘡涓粍浠跺搴斾竴涓櫄鎷烡OM鏍戙€傪煂间负浠€涔堥渶瑕佽櫄鎷焏om涓昏鏄敱Vue妗嗘灦缁撴瀯鍐冲畾鐨勩€傚湪Vue涓紝娓叉煋瑙嗗浘浼氳皟鐢╮ender鍑芥暟銆傝繖绉嶆覆鏌撲笉浠呭彂鐢熷湪鍒涘缓缁勪欢鏃讹紝涔熷彂鐢熷湪鏇存柊渚濊禆鏁版嵁鏃躲€傚鏋滃湪娓叉煋鏃剁洿鎺ヤ娇鐢ㄧ湡瀹濪OM锛岀湡瀹濪OM鐨勫垱寤恒€佹洿鏂般€佹彃鍏ョ瓑鎿嶄綔浼氬甫鏉ュぇ閲忕殑鎬ц兘娑堣€楋紝浼氬ぇ澶ч檷浣庢覆鏌撴晥鐜囥€備緥瀛愶細姣旇緝鍒涘缓js瀵硅薄鍜屽垱寤虹湡瀹瀌om瀵硅薄鐨勮€楁椂杩愯缁撴灉锛氫粠缁撴灉鏉ョ湅锛宩s瀵硅薄鑰楁椂150ms锛岃€岀湡姝ｇ殑dom鑰楁椂灏嗚繎7s銆傝繖杩樹笉绠楁彃鍏ラ〉闈㈤€犳垚鐨勯噸缁樺拰閲嶆帓鏃堕棿锛屽緢鎭愭€栵紒鎵€浠ue鍦ㄦ覆鏌撴椂浣跨敤铏氭嫙dom鑰屼笉鏄湡瀹瀌om锛屼富瑕佹槸涓轰簡瑙ｅ喅娓叉煋鏁堢巼鐨勯棶棰樸€傚厜鏈夎櫄鎷焏om鏄笉琛岀殑锛屾€庝箞鏄剧ず椤甸潰鍛紵瀹冧笉鍙兘鏄病鏈夋枃瀛楃殑涔︼紒鎺ヤ笅鏉ユ槸绗笁涓柟闈煂磋櫄鎷焏om濡備綍杞寲涓虹湡瀹瀌om褰撲竴涓粍浠跺疄渚嬬涓€娆¤娓叉煋鏃讹紝浼氬厛鐢熸垚涓€涓櫄鎷焏om鏍戯紝鐒跺悗鏍规嵁铏氭嫙dom鏍戝垱寤轰竴涓湡瀹瀌om锛屾渶鍚庢妸鐪熸鐨凞OM鎸傝浇鍒伴〉闈腑鍚堥€傜殑浣嶇疆锛屾墍浠ュ垱寤虹湡姝ｇ殑DOM杩欎竴姝ユ槸蹇呬笉鍙皯鐨勩€傚彧鑳借鏄敖閲忓皯鍒涢€犮€傚鏋滈〉闈㈠彧闇€瑕佹覆鏌撲竴娆★紝鍚庨潰鐨勬暟鎹彉鍖栦笉浼氶噸鏂版覆鏌撻〉闈紝杩欐椂鍊檝ue鐨勬晥鐜囧叾瀹炴瘮鐩存帴鎿嶄綔dom瑕佷綆锛屽洜涓哄畠姣旂洿鎺ユ搷浣渄om澶氫簡涓€姝?鍒涘缓铏氭嫙dom銆傜涓€娆ue娓叉煋鏁堢巼涓嶉珮锛屽悗闈㈠氨涓嶄竴鏍蜂簡銆傚鏋滀竴涓粍浠跺彈鍒板搷搴斿紡鏁版嵁鍙樺寲鐨勫奖鍝嶏紝闇€瑕侀噸鏂版覆鏌擄紝瀹冧粛鐒朵細鍐嶆璋冪敤娓叉煋鍑芥暟鏉ュ垱寤轰竴涓柊鐨勮櫄鎷焏om鏍戙€傝繖鏃跺€欎細鐢ㄦ柊鐨勮櫄鎷焏om鏍戯紙newVnode锛夊拰鏃х殑铏氭嫙dom鏍戯紙oldVnode锛夎繘琛屾瘮杈冿紝閫氳繃姣旇緝锛寁ue浼氭壘鍒版渶灏忕殑鏇存柊閲忥紝鐒跺悗鏇存柊蹇呰鐨勮櫄鎷焏om鑺傜偣锛屾渶鍚庯紝杩欎簺鏇存柊鐨勮櫄鎷熻妭鐐逛細淇敼瀹冧滑瀵瑰簲鐨勭湡瀹瀌om銆傝繖鏍峰氨淇濊瘉浜嗗鐪熷疄dom鐨勬搷浣滀慨鏀规渶灏戙€傛瘮杈冭繃绋嬪叾瀹炰娇鐢ㄤ簡涓€绉嶅彨鍋歱atch鐨勭畻娉曪紝鍙互鍒ゆ柇鍝簺鑺傜偣鍙戠敓浜嗗彉鍖栵紝鍙洿鏂板彂鐢熷彉鍖栫殑铏氭嫙dom鑺傜偣銆傛垜浼氬啓涓€绡囧叧浜巔atch鐨勬枃绔犳潵璋堣皥鎴戠殑鐪嬫硶銆傪煈嬫ā鏉夸笌铏氭嫙dom鐨勫叧绯籿ue妗嗘灦涓湁涓€涓紪璇戞ā鍧楋紝涓昏璐熻矗灏嗘ā鏉胯浆鍖栦负render鍑芥暟锛岃皟鐢╮ender鍑芥暟鍚庡緱鍒拌櫄鎷焏om銆傜紪璇戣繃绋嬪垎涓轰袱姝ワ細灏嗘ā鏉垮瓧绗︿覆杞崲涓篈ST锛堟娊璞¤娉曟爲锛孉bstractSyntaxTree锛夊拰灏咥ST杞崲涓簉ender鍑芥暟銆傚鏋滀娇鐢ㄤ紶缁熺殑瀵煎叆鏂瑰紡锛堜娇鐢╯cript鏍囩瀵煎叆vue.js锛夛紝缂栬瘧鏃堕棿鍙戠敓鍦ㄧ粍浠剁涓€娆″姞杞芥椂锛岀О涓鸿繍琛屾椂缂栬瘧銆傚鏋滄槸鍦╲ue-cli鐨勯粯璁ら厤缃腑锛屽垯缂栬瘧鍙戠敓鍦ㄦ墦瀛楃殑鏃跺€欙紝绉颁负妯℃澘棰勭紪璇戙€傜紪璇戞槸涓€涓潪甯歌€楁€ц兘鐨勬搷浣溿€傞缂栬瘧鍙互鏈夋晥鎻愰珮杩愯鏃舵€ц兘銆傝€屼笖锛岀敱浜庤繍琛屾椂涓嶅啀闇€瑕佺紪璇戯紝vue-cli鍦ㄦ墦鍖呯殑鏃跺€欎細鎶妚ue涓殑compile妯″潡鎺掗櫎鎺夛紝杩欐牱鍙互鍑忓皯鎵撳寘浣撶Н銆?妯℃澘鐨勫瓨鍦紝鍙槸涓轰簡璁╂垜浠洿鏂逛究鐨勭紪鍐欑晫闈唬鐮併€傚綋Vue鏈€缁堣繍琛屾椂锛屽畠闇€瑕佷竴涓覆鏌撳嚱鏁拌€屼笉鏄ā鏉裤€傝繖閲岄渶瑕佹敞鎰忕殑鏄紝Vue鏄笉璁よ瘑妯℃澘鐨勶紝鑰屾ā鏉挎槸vue-cli棰勭紪璇戞墍闇€瑕佺殑锛屽畠鏈€缁堜細鎶婃ā鏉跨紪璇戞垚render鍑芥暟锛岃vue姝ｅ父杩愯銆傚洜姝わ紝妯℃澘涓殑鍚勭璇硶鍦ㄨ櫄鎷焏om涓槸涓嶅瓨鍦ㄧ殑锛屽畠浠兘浼氭垚涓鸿櫄鎷焏om鐨勯厤缃€傪煒婂ソ浜嗭紝浠ヤ笂灏辨槸鎴戠殑鍒嗕韩浜嗐€傚鏋滃ぇ瀹跺virtualdom鏈夊叾浠栫殑鐞嗚В锛屽彲浠ュ湪璇勮鍖鸿璁哄摝~璁板緱鐐逛釜璧烉煈嶆敮鎸佷竴涓媬馃槝
