Vue3是如何通过编译优化来提升框架性能的？

鍦ㄨ繖娈典唬鐮佷腑锛屽敮涓€浼氭敼鍙樼殑灏辨槸h2鍏冪礌锛岃€屼笖鍙湁content浼氭敼鍙橈紝瀹冪殑attr涓嶄細鏀瑰彉銆傚鏋滄瘮杈冩柊鏃Node鏍戯紝浼氭湁浠ヤ笅姝ラ锛氭瘮杈僤iv鍜屾瘮杈僤iv鐨勫瀛愶紝鐢―iff绠楁硶鎵惧嚭key鐩稿悓鐨勫厓绱狅紝涓€涓€姣旇緝銆俬1鍏冪礌涓巋2鍏冪礌杩涜姣旇緝銆傛瘮杈冨畬鎴愬悗锛屽彂鐜癶2鍏冪礌鐨勬枃鏈唴瀹瑰彂鐢熶簡鍙樺寲锛岀劧鍚嶸ue浼氭洿鏂癶2鐨勬枃鏈唴瀹广€備絾瀹為檯涓婂彧鏈塰2鍏冪礌浼氬彂鐢熷彉鍖栥€傚鏋滄垜浠彧鑳芥瘮杈僪2鍏冪礌锛岀劧鍚庢壘鍒板畠鍙樺寲鐨勫唴瀹癸紝鏇存柊瀹冦€傚啀鑰咃紝鍏跺疄鍙湁h2鐨勬枃鏈細鍙戠敓鍙樺寲锛屽彧姣旇緝h2鍏冪礌鐨勬枃鏈唴瀹癸紝鐒跺悗鏇存柊锛岃繖鏍峰彲浠ュぇ澶ф彁楂樻€ц兘銆傛爣璁板厓绱犲彉鍖栭儴鍒嗕负浜嗚褰曟瘡涓姩鎬佸厓绱犲彉鍖栫殑鍐呭锛岄渶瑕佸紩鍏atchFlag鐨勬蹇点€俻atchFlagpatchFlag鐢ㄤ簬鏍囪鍏冪礌涓殑鍔ㄦ€佸唴瀹癸紝鏄疺Node涓殑涓€涓睘鎬с€傝繕鏄繖涓緥瀛愶細娣诲姞patchFlag鍚庯紝h2VNode涓猴細{type:'h2',children:ctx.msg,patchFlag:1}patchFlag涓?锛岃〃绀鸿繖涓厓绱犵殑Text閮ㄥ垎浼氬彂鐢熷彉鍖栥€傛敞鎰忥細patchFlag鏄竴涓暟瀛楃被鍨嬬殑鍊硷紝璁板綍浜嗗綋鍓嶅厓绱犲彉鍖栫殑閮ㄥ垎锛孭atchFlag鏄疶ypescript鐨凟num鏋氫妇绫诲瀷銆備笅闈㈡槸PatchFlag鐨勬灇涓惧畾涔夌殑涓€閮ㄥ垎銆俥xportconstenumPatchFlags{//浠ｈ〃鍏冪礌鐨勬枃鏈細鏀瑰彉TEXT=1,//浠ｈ〃鍏冪礌鐨勭被浼氭敼鍙楥LASS=1<<1,//浠ｈ〃鍏冪礌鐨勬牱寮忎細鏀瑰彉STYLE=1<<2,//琛ㄧず鍏冪礌鐨刾rops浼氬彂鐢熷彉鍖朠ROPS=1<<3,//...}褰損atchFlag===PatchFlags.TEXT锛屽嵆patchFlag===1鏃讹紝琛ㄧず鍏冪礌鐨凾ext浼氬彂鐢熷彉鍖栥€俻atchFlag鏄簩杩涘埗瀛樺偍鐨勶紝姣忎竴浣嶅瓨鍌ㄤ竴鏉′俊鎭€傚鏋淧atchFlag鐨勭涓€浣嶄负1锛屽垯琛ㄧずText鏄姩鎬佺殑锛涘鏋滅浜屼綅涓?锛屽垯琛ㄧずClass鏄姩鎬佺殑銆傚鏋滀竴涓厓绱犲悓鏃舵湁Text鍜孋lass鍙樺寲锛宲atchFlag涓?锛屽嵆PatchFlag.TEXT|琛ヤ竵鏍囧織绫伙紝1|2銆?浜岃繘鍒朵负01锛?浜岃繘鍒朵负10锛屾寜浣嶆垨鐨勭粨鏋滀负11锛屽嵆鍗佽繘鍒剁殑3銆傝绠楄繃绋嬪涓嬶細鏈変簡杩欐牱鐨勮璁★紝鎴戜滑鍙互鏍规嵁姣忎竴浣嶆槸鍚︿负1鏉ュ喅瀹氭槸鍚︽洿鏂扮浉搴旂殑鍐呭锛岀敤鎸変綅涓?鏉ュ垽鏂€傚叿浣撹繃绋嬪涓嬶細浼唬鐮佸涓嬶細functionpatchElement(n1,n2){if(n2.patchFlag>0){//鏈変簡PatchFlag锛屽彧闇€瑕佹洿鏂板姩鎬侀儴鍒唅f(patchFlag&PatchFlags.TEXT){//鏇存柊绫粆if(patchFlag&PatchFlags.CLASS){//鏇存柊绫粆if(patchFlag&PatchFlags.PROPS){//鏇存柊绫粆...}else{//娌℃湁PatchFlag锛屾瘮杈冨苟鏇存柊infull}}褰撳厓绱犳湁patchFlag鏃讹紝鍙洿鏂皃atchFlag瀵瑰簲鐨勯儴鍒嗐€傚鏋滄病鏈塸atchFlag锛屽垯姣旇緝鏂版棫VNode鐨勬墍鏈夊睘鎬э紝鎵惧嚭宸紓骞舵洿鏂般€備负浜嗙敓鎴恉ynamicChildren鍜宲atchFlag锛岄渶瑕佺紪璇戝櫒鐨勯厤鍚堬紝鍦ㄧ紪璇戞椂鍒嗘瀽鍔ㄦ€佸厓绱犲拰鍐呭銆俻atchFlag鐨勪骇鐢熸柟寮忔槸鐢变簬妯℃澘缁撴瀯闈炲父绋冲畾锛屽緢瀹规槗鍒ゆ柇妯℃澘鍏冪礌鏄惁涓哄姩鎬佸厓绱狅紝鍙互鍒ゆ柇鍏冪礌鐨勫摢浜涘唴瀹规槸鍔ㄦ€佺殑杩樻槸杩欎釜渚嬪瓙锛?template>Vue缂栬瘧鍣ㄤ細鐢熸垚濡備笅浠ｇ爜锛堜笉鏄渶缁堢敓鎴愮殑浠ｇ爜锛夛細import{ref,createVNode}from'vue'const__sfc__={__name:'App',setup(){constmsg=ref('HelloWorld!')//renderfunctionaftersetup杩斿洖缂栬瘧return()=>{returncreateVNode("div",{class:"container"},[createVNode("h1",null,"hello"),createVNode("h2",null,msg.value,1/*TEXT*/)])}}}createVNode鍑芥暟鏄叾瀹炲氨鏄疺ue鎻愪緵鐨勬覆鏌撳嚱鏁癶锛屼絾鏄瘮h鏇村己澶у浼犻€抪atchFlag鍙傛暟瀵逛簬鍔ㄦ€佸厓绱狅紝鍦ㄥ垱寤篤Node鐨勬椂鍊欙紝浼氬浼犻€掍竴涓猵atchFlag鍙傛暟锛岃繖鏍风敓鎴愮殑VNode涔熶細澶氫竴涓猵atchFlag灞炴€э紝鎰忔€濇槸VNode鏄姩鎬佺殑銆傝褰曞姩鎬佸厓绱犱粠涓婁竴鑺傛垜浠彲浠ョ煡閬撳甫鏈塸atchFlag鐨勫厓绱犳槸鍔ㄦ€佸厓绱狅紝閭ｄ箞濡備綍鏀堕泦璁板綍鍛紵涓轰簡杈惧埌涓婅堪鐩殑锛屾垜浠渶瑕佸紩鍏ュ潡锛坆lock锛夌殑姒傚康銆侭lockBlock鏄竴涓壒娈婄殑VNode锛屽彲浠ヨ礋璐ｆ敹闆嗗叾鍐呴儴鐨勬墍鏈夊姩鎬佽妭鐐广€侭lock姣旀櫘閫氱殑VNode澶氫簡dynamicChildren灞炴€э紝鐢ㄦ潵瀛樻斁閲岄潰鎵€鏈夌殑鍔ㄦ€佸瓙鑺傜偣銆?杩樻槸杩欎釜渚嬪瓙锛?template>h1鐨刅Node鏄細consth1={type:'h1',children:'hello'}h2鐨刅Node鏄細consth2={type:'h2',children:ctx.msg,patchFlag:1}div鐨刅Node鏄細constvnode={type:'div',children:[h1,h2],dynamicChildren:[h2//鍔ㄦ€佽妭鐐癸紝浼氬瓨鍌ㄥ湪dynamicChildren],}杩欓噷鐨刣iv鏄疊lock锛屽疄闄呬笂Vue浼氭妸缁勪欢涓殑绗竴涓厓绱犱綔涓築lockBlock鏉ユ洿鏂板姩鎬佺殑VNodenode锛屼細鎸夐『搴忓瓨鏀惧湪Block鐨刣ynamicChildren涓紝杩欐牱鍙瘮杈冭繖浜涘厓绱狅紝鍏朵粬闈欐€佸厓绱犱細琚烦杩囥€傞噷闈㈢殑鎵€鏈夊姩鎬佸厓绱犻兘鏄寜椤哄簭鏌ユ壘鐨勶紝鍗虫棫VNode鐨刣ynamicChildren鍏冪礌鍜屾柊VNode鐨刣ynamicChildren鍏冪礌鏄竴涓€瀵瑰簲鐨勩€傛湰璁捐涓嶉渶瑕佷娇鐢―iff绠楁硶銆備粠鏂版棫VNode鐨勪袱涓瓙鏁扮粍涓紝鎵惧埌瀵瑰簲鐨勶紙鐩稿悓key锛夊厓绱狅紝鐒跺悗鎴戜滑鏇存柊缁勪欢涓厓绱犵殑绠楁硶锛屽彲浠ヨ繖鏍凤細//浼犲叆涓や釜鍏冪礌鐨勬棫VNode锛歯1andnewVNoden2,//patch鐨勬剰鎬濇槸鎵撹ˉ涓侊紝鍗冲瀹冧滑杩涜姣旇緝鏇存柊functionpatchElement(n1,n2){if(n2.dynamicChildren){//浼樺寲璺緞//鐩存帴姣旇緝dynamicChildrenpatchBlockChildren(n1.dynamicChildren,n2.dynamicChildren)}else{//瀹屾暣姣旇緝patchChildren(n1,n2)}}patchBlockChildren鐨勫ぇ姒傚疄鐜板涓嬶細//姣旇緝鏃х殑鍜屾柊鐨勫瀛愶紙鏄竴涓猇Node鏁扮粍),鍜屾洿鏂板嚱鏁皃atchBlockChildren(oldDynamicChildren,oldDynamicChildren){//閫愪竴姣旇緝浠ヤ究(leti=0;i

hello

{{msg}}

濡傛灉msg鏍规嵁鎴戜滑涓婁竴鑺傛敹鍒扮殑鍐呭浠巙ndefined鍙樹负helloWorld锛岃鏄庢棫VNode鐨刣ynamicChildren涓虹┖锛堟棤鍔ㄦ€佽妭鐐癸級锛屾柊鐨刣ynamicChildren鏄拡瀵筯2鐨勬儏鍐碉紝v-if/v-else浣垮緱妯℃澘缁撴瀯涓嶇ǔ瀹氾紝瀵艰嚧dynamicChildren涔嬮棿涓€涓€瀵瑰簲銆傞偅涔堣鎬庝箞鍔烇紵瑙ｅ喅鏂规硶涔熷緢绠€鍗曪紝璁﹙-if/v-else鐨勫厓绱犱篃浣滀负Block锛岃繖鏍峰氨寰楀埌浜嗕竴涓狟lock鏍戙€侭lock灏嗕綔涓哄姩鎬佽妭鐐硅dynamicChildren鏀堕泦銆備緥濡傦細褰搈sg鏈畾涔夋椂锛岀粍浠朵腑鍏冪礌鐨刅Node濡備笅锛歝onstvnode={type:'div',key:0,//杩欓噷鏄竴涓柊鐨刱eychildren:[h1],dynamicChildren:[h1//h1鏄竴涓狟lock(h1v-if)锛屼細瀛樺偍鍦╠ynamicChildren],}褰搈sg涓嶄负绌烘椂锛岀粍浠朵腑鍏冪礌鐨刅Node濡備笅锛歝onstvnode={type:'div',key:0,//杩欓噷鏄柊澧炵殑keychildren:[h1],dynamicChildren:[p//pisBlock(pv-else),浼氬瓨鍌ㄥ湪dynamicChildren],}瀵逛簬Block(div),瀹冪殑dynamicChildren鏄ǔ瀹氱殑锛岄噷闈㈢殑鍏冪礌杩樻槸涓€涓€瀵瑰簲鐨勶紝鎵€浠ュ彲浠ュ緢蹇壘鍒板搴旂殑VNode銆倂-if/v-else鍒涘缓瀛愬潡鏃讹紝浼氫负瀛愬潡鐢熸垚涓嶅悓鐨刱ey銆傛湰渚嬩腑Block(h1v-if)鍜孊lock(pv-else)鏄搴旂殑涓€缁刅Node/Block锛屽畠浠殑key鏄笉鍚岀殑锛屾墍浠ュ湪鏇存柊杩欎袱涓狟lock鐨勬椂鍊欙紝Vue浼氬嵏杞戒箣鍓嶇殑锛岀劧鍚庨噸鏂板垱寤哄厓绱犮€傝鏂规鐨勬牳蹇冩€濇兂鏄皢涓嶇ǔ瀹氬厓绱犻檺鍒跺湪鏈€灏忚寖鍥村唴锛屽苟浣垮灞傚潡绋冲畾銆傝繖鏍峰仛鏈変互涓嬪ソ澶勶細纭繚绋冲畾鐨勫鍧楀彲浠ョ户缁娇鐢ㄤ紭鍖栧悗鐨勬洿鏂扮瓥鐣ャ€傞檷绾х瓥鐣ュ湪鐨勫唴閮ㄥ潡涓疄鐜帮紝鍙繘琛屽叏閲忔洿鏂版瘮杈冦€傚悓鏍凤紝v-for涔熶細閫犳垚妯℃澘涓嶇ǔ瀹氥€傝В鍐虫柟妗堟槸灏唙-for鐨勫唴瀹逛綔涓轰竴涓崟鐙殑block鏉ヤ繚璇佸閮╠ynamicChildren鐨勭ǔ瀹氭€с€傚浣曞垱寤築lock鍙渶瑕佸皢甯︽湁patchFlag鐨勫厓绱犳敹闆嗗埌dynamicChildren鏁扮粍涓紝浣嗘槸濡備綍纭畾VNode鏀堕泦鍒板摢涓狟lock涓憿锛熸垨鑰呰繖涓緥瀛愶細Vue缂栬瘧鍣ㄤ細鐢熸垚濡備笅浠ｇ爜锛堜笉鏄渶缁堢殑code):import{ref,createVNode,openBlock}from'vue'const__sfc__={__name:'App',setup(){constmsg=ref('HelloWorld!')//renderfunctionaftersetup杩斿洖compilereturn()=>{return(//娣诲姞openBlockopenBlock(),//createVNode鏀逛负createBlockcreateBlock("div",{class:"container"},[createVNode("h1",null,"hello"),createVNode("h2",null,msg.value,1/*TEXT*/)]))}}}涓庝笂涓€鑺傜浉姣旓紝鏈変互涓嬪尯鍒細娣诲姞openBlockcreateVNode锛屾敼鎴恈reateBlock锛岀敱浜嶣lock鏄竴涓寖鍥达紝鎵€浠ラ渶瑕丱penBlock鍜宑loseBlock鏉ュ垝瀹氳寖鍥达紝浣嗘槸鍥犱负closeBlock鎴戜滑鐪嬩笉鍒癱loseBlockcreateBlock鍑芥暟涓洿鎺ヨ皟鐢ㄧ殑openBlock鍜宑loseBlock锛堟垨createBlock锛変箣闂寸殑鍏冪礌浼氳鏀堕泦鍒板綋鍓岯lock涓€傛垜浠湅涓€涓媟ender鍑芥暟鐨勬墽琛岄『搴忥細openBlock锛屽垵濮嬪寲currentDynamicChildren鏁扮粍createVNode锛屽垱寤篽1鐨刅NodecreateVNode锛屽垱寤篽2鐨刅Node锛岃繖鏄竴涓姩鎬佸厓绱狅紝灏哣Node鎺ㄥ叆currentDynamicChildrencreateBlock锛屽垱寤篸iv鐨刅Node锛屽湪createBlock涓缃甤urrentDynamicChildren涓篸ynamicChildren鍊煎緱娉ㄦ剰鐨勬槸锛岄噷闈㈢殑createVNode鏄厛鎵ц鐨勶紝createBlock鏄悗鎵ц鐨勶紝鎵€浠ュ彲浠ユ敹闆唎penBlock鍜宑loseBlock涔嬮棿鐨勫姩鎬佸厓绱燰Node銆俹penBlock鍜宑loseBlock鐨勫疄鐜板涓嬶細//blocks鍙互宓屽锛屽綋鍑虹幇宓屽鏃讹紝浣跨敤鏍堜繚瀛樹笂涓€灞傛敹闆嗙殑鍐呭//鐒跺悗鍦╟losingBlock鏃舵仮澶嶄笂涓€灞傜殑鍐呭constdynamicChildrenStack=[]//VNodelet鐢ㄤ簬鍦ㄥ綋鍓嶈寖鍥村唴瀛樺偍鍔ㄦ€佸厓绱燾urrentDynamicChildren=nullfunctionopenBlock(){currentDynamicChildren=[]dynamicChildrenStack.push(currentDynamicChildren)}//鍦╟reateBlock鍑芥暟涓皟鐢╟loseBlock(){``currentDynamicChildren=dynamicChildrenStack.pop()}鍥犱负Block鍙互宓屽锛屾墍浠ラ渶瑕佸叆鏍堛€傚綋openBlock鍒濆鍖栧叆鏍堬紝褰揷loseBlock鐢ㄤ簬鎭㈠涓婁竴灞傜殑dynamicChildren鏃躲€俢reateVnode鐨勪唬鐮佸ぇ鑷村涓嬶細/濡傛灉鏈塸atchFlags锛屽垯璁板綍鍔ㄦ€佸厓绱犵殑Vnodeif(patchFlags){currentDynamicChildren.push(vnode)}returnvnode}createBlock鐨勪唬鐮佸ぇ鑷村涓嬶細block鐨勬湰璐ㄤ篃鏄竴涓猇Nodeconstvnode=createVNode(tag,props,children)vnode.dynamicChildren=currentDynamicChildrencloseBlock()//褰撳墠鍧椾篃浼氳鏀堕泦鍒板墠涓€涓潡鐨刣ynamicChildren涓璫urrentDynamicChildren.push(vnode)returnvnode}鍏朵粬缂栬瘧浼樺寲鎵嬫闈欐€佹敼杩涜繕鏄繖涓緥瀛愶紙鍦ㄧ嚎棰勮锛夛細瀹為檯涓婁細琚紪璇戞垚涓嬪浘锛氫笌鎴戜滑涓婁竴鑺傜殑鍖哄埆鍦ㄤ簬锛岀紪璇戝悗鐨勪唬鐮佷細澧炲姞闈欐€佸厓绱犵殑createVNode锛岃繖鏍峰氨涓嶄細姣忔缁勪欢鏇存柊鏃堕兘閲嶆柊鍒涘缓VNode锛岃繖鏍锋瘡娆Node寮曠敤鐩稿悓鏃讹紝Vue娓叉煋鍣ㄥ氨浼氳烦杩囧叾娓叉煋棰勫瓧绗︿覆鍖栧湪绾跨ず渚嬮瑙?template>

浣犲ソ

浣犲ソ

浣犲ソ

浣犲ソ

浣犲ソ

浣犲ソ

浣犲ソ

浣犲ソ

浣犲ソ

浣犲ソ

濡傛灉妯℃澘鍖呭惈寰堝Continuousstaticlabel鑺傜偣浼氬皢杩欎簺闈欐€佽妭鐐瑰簭鍒楀寲鎴愬瓧绗︿覆锛岀敓鎴愪竴涓猄taticVNode銆傝繖鏍峰仛鐨勫ソ澶勬槸锛氬ぇ鍧楃殑闈欐€佽祫婧愬彲浠ョ洿鎺ラ€氳繃innerHTML璁剧疆锛屾€ц兘鏇村ソ锛屽噺灏戜簡鍒涘缓澶ч噺VNode鍑忓皯鍐呭瓨娑堣€楀拰缂栬瘧鐨勯渶瑕佸彲浠ュJSX杩涜浼樺寲鐩墠JSX娌℃湁缂栬瘧浼樺寲鎴戝湪銆婃祬璋堝墠绔鏋跺師鐞嗐€嬮噷璁茶繃锛氭ā鏉挎槸鍩轰簬HTML璇硶鎵╁睍鐨勶紝涓嶆槸寰堢伒娲伙紝浣嗘槸涔熸剰鍛崇潃瀹规槗鍒嗘瀽鑰屼笖JSX鏄熀浜嶦CMAScriptSugar鐨勮娉曪紝鎵╁睍鐨勬槸ECMAScript鐨勮娉曪紝浣嗘槸ECMAScript涔熸槸鐏垫椿鍦板疄鐜伴潤鎬佸垎鏋愩€備緥濡傦細js瀵硅薄鍙互琚鍒躲€佷慨鏀广€佸鍏ュ鍑虹瓑銆傛棤娉曞垽鏂璲s鍙橀噺涓瓨鏀剧殑jsx鍐呭鏄惁涓洪潤鎬佸唴瀹癸紝鍥犱负鍙兘鏌愬琚慨鏀癸紝鏃犳硶闈欐€佹爣璁般€備絾涔熶笉鏄畬鍏ㄤ笉鍙互锛屾瘮濡傞€氳繃绾︽潫JSX鐨勭伒娲绘€э紝鍙互闈欐€佸垎鏋愶紝姣斿SolidJS銆傛€荤粨鍦ㄨ繖绡囨枃绔犱腑锛屾垜浠鍏堣璁轰簡缂栬瘧浼樺寲鐨勪紭鍖栨柟鍚戯細灏藉彲鑳藉尯鍒嗗姩鎬佸唴瀹瑰拰闈欐€佸唴瀹癸紝鐒跺悗鍦╒ue涓叿浣撳寲锛屽嵆浠庢ā鏉胯娉曚腑鍒嗙鍔ㄦ€佸拰闈欐€佸厓绱狅紝骞舵爣璁板姩鎬佸厓绱犮€傚強鍏跺姩鎬侀儴鍒嗐€傚綋鎴戜滑鏍囪鍔ㄦ€佸唴瀹规椂锛孷ue鍙互閰嶅悎娓叉煋鍣ㄥ揩閫熸煡鎵惧拰鏇存柊鍔ㄦ€佸唴瀹癸紝浠庤€屾彁楂樻€ц兘銆傘€愬浣曡褰曞姩鎬佸厓绱犮€戞渶鍚庝粙缁嶄簡涓€浜涘叾浠栫殑缂栬瘧浼樺寲鏂规硶锛屼互鍙婁负浠€涔圝SX闅句互缂栬瘧浼樺寲銆傚鏋滆繖绡囨枃绔犲浣犳湁甯姪锛屽彲浠ョ偣涓禐鏀惰棌涓€涓嬸煈嶏紝浣犵殑榧撳姳鏄垜鍒涗綔鏈€澶х殑鍔ㄥ姏銆備篃鍙互鍏虫敞鎴戠殑鍏紬鍙疯闃呭悗缁枃绔狅細绯栨灉鐨勪慨浠欑绫嶏紙鐐瑰嚮璺宠浆锛?/p>