当前位置: 首页 > Web前端 > HTML5

Vue源码分析:virtualdom对比原理

时间:2023-04-05 22:39:37 HTML5

鐪嬪畬Vue2.0婧愮爜鎯冲啓鍐欒嚜宸辩殑鐞嗚В锛屼絾鏄兘鍔涙湁闄愶紝鎵€浠ヤ粠娓稿厛鐢熺涓€娆℃姇绋垮紑濮嬮槄璇?016骞?鏈?1鏃ワ紝鍙堣闄嗙画鍐欎簡锛氭ā鏉垮瓧绗tring杞珹ST璇硶鏍慉ST璇硶鏍戣浆render鍑芥暟Vue鍙屽悜缁戝畾鍘熺悊Vue铏氭嫙dom瀵规瘮鍘熺悊閲岄潰鏈夎嚜宸辩殑鐞嗚В鍜屾簮鐮佸垎鏋愶紝璇曡瘯灏藉彲鑳藉鏄撶悊瑙o紒鐢变簬鏄渶鏃╂彁浜ょ殑2.0锛屼笌鏈€鏂扮増鏈瓨鍦ㄨ澶氬樊寮傚拰bug锛屽悗缁細琛ュ厖锛屾暚璇疯皡瑙o紒鍖呭惈涓枃娉ㄩ噴鐨剉ue婧愮爜宸蹭笂浼犮€傘€傘€傚厛璇磋涓轰粈涔堜細鏈夎櫄鎷焏om瀵规瘮闃舵銆傛垜浠煡閬揤ue鏄竴涓暟鎹┍鍔ㄧ殑瑙嗗浘锛堟暟鎹殑鏀瑰彉浼氬紩璧疯鍥剧殑鏀瑰彉锛夛紝浣嗘槸浣犲彂鐜版煇涓暟鎹敼鍙樼殑鏃跺€欙紝瑙嗗浘鏄眬閮ㄥ埛鏂扮殑锛岃€屼笉鏄暣涓噸鏂版覆鏌撶殑銆傚浣曞噯纭壘鍒版暟鎹搴旂殑瑙嗗浘骞舵洿鏂帮紵閭d箞灏遍渶瑕佽幏鍙栨暟鎹彉鍖栧墠鍚庣殑dom缁撴瀯锛屾壘鍑轰笉鍚岀偣杩涜鏇存柊锛佽櫄鎷焏om鏈川涓婃槸浠庣湡瀹瀌om涓娊鍙栧嚭鏉ョ殑绠€鍗曞璞°€傚氨鍍忎竴涓畝鍗曠殑div鍖呭惈浜?00澶氫釜灞炴€э紝浣嗙湡姝i渶瑕佺殑鍙兘鍙湁tagName锛屾墍浠ョ洿鎺ユ搷浣滅湡瀹炵殑dom浼氬ぇ澶у奖鍝嶆€ц兘锛佺畝鍖栧悗鐨勮櫄鎷熻妭鐐癸紙vnode锛夊ぇ鑷村寘鍚互涓嬪睘鎬э細{tag:'div',//鏍囩鍚峝ata:{},//灞炴€ф暟鎹紝鍖呮嫭class,style,event,props,attrs绛塩hildren:[],//瀛愯妭鐐规暟缁勶紝涔熸槸vnode缁撴瀯text:undefined,//textelm:undefined,//realdomkey:undefined//nodeID}virtualdom鐨勬瘮杈冩槸鎵惧嚭鏂扮殑鑺傜偣锛坴node锛夊拰鏃ц妭鐐癸紙oldVnode锛夛紝鐒跺悗淇ˉ宸紓銆備竴鑸繃绋嬪涓嬨€傛暣涓繃绋嬫瘮杈冪畝鍗曘€傚鏋滄柊鏃ц妭鐐逛笉鐩镐技锛岀洿鎺ュ熀浜庢柊鑺傜偣鍒涘缓dom锛涘鏋滅浉浼硷紝鍏堟瘮杈冩暟鎹紝鍖呮嫭class銆乻tyle銆乪vent銆乸rops銆乤ttrs绛夛紝鏈変笉鍚屽氨璋冪敤鐩稿簲鐨剈pdate鍑芥暟锛岀劧鍚庢槸瀛愯妭鐐圭殑姣旇緝锛屽瓙鑺傜偣鐨勬瘮杈冧娇鐢╠iff绠楁硶锛屽簲璇ユ槸鏈枃鐨勯噸鐐瑰拰闅剧偣銆傚€煎緱娉ㄦ剰鐨勬槸锛屽湪ChildrenCompare杩囩▼涓紝濡傛灉鍙戠幇鐩镐技鐨刢hildVnode锛屽氨浼氶€掑綊杩涘叆鏂扮殑patching杩囩▼銆傛簮鐮佸垎鏋愯繖娆℃簮鐮佸垎鏋愬啓鐨勬瘮杈冪畝娲併€傚啓澶氫簡鍙戠幇涓嶆兂鐪嬩簡(鈹琠鈹?鍏堣patch()鍑芥暟锛歠unctionpatch(oldVnode,vnode){varelm,parent;if(sameVnode(oldVnode,vnode)){//濡傛灉鐩镐技鍒欐墦琛ヤ竵锛堝銆佸垹銆佹敼锛塸atchVnode(oldVnode,vnode);}else{//濡傛灉涓嶇浉浼硷紝鍒欒鐩栨暣涓猠lm=oldVnode.elm;parent=api.parentNode(elm);鍒涘缓姒嗘爲锛坴node锛夛紱if(parent!==null){api.insertBefore(parent,vnode.elm,api.nextSibling(elm));removeVnodes(parent,[oldVnode],0,0);}}杩斿洖vnode銆俥lm;}patch()鍑芥暟鎺ユ敹涓や釜鍙傛暟锛屾棫鐨勫拰鏂扮殑vnode銆備紶鍏ョ殑涓や釜鍙傛暟鏈夊緢澶у尯鍒細oldVnode鐨別lm鎸囧悜鐨勬槸鐪熸鐨刣om锛岃€寁node鐨別lm鏄痷ndefined...浣嗘槸鍦╬atch()鏂规硶涔嬪悗锛寁node鐨別lm涔熶細鎸囧悜鍒拌繖涓紙鏇存柊鐨勶級鐪熷疄鐨刣om銆傚垽鏂柊鏃node鏄惁鐩镐技鐨剆ameVnode()鏂规硶寰堢畝鍗曪紝灏辨槸姣旇緝tag鍜宬ey鏄惁涓€鑷淬€俧unctionsameVnode(a,b){returna.key===b.key&&a.tag===b.tag;}Patch澶勭悊鏂版棫vnode涓嶄竴鑷寸殑鏂规硶寰堢畝鍗曘€傚氨鏄牴鎹畍node鍒涘缓涓€涓湡姝g殑dom锛岃€屼笉鏄痮ldVnode涓殑elm鎻掑叆DOM鏂囨。銆傛柊鏃node鐨勪竴鑷村鐞嗗氨鏄垜浠墠闈㈢粡甯告彁鍒扮殑patching銆備粈涔堟槸琛ヤ竵锛熺湅鐪媝atchVnode()鏂规硶锛歠unctionpatchVnode(oldVnode,vnode){//鏂拌妭鐐瑰紩鐢ㄨ€佽妭鐐圭殑domletelm=vnode.elm=oldVnode.elm;constoldCh=oldVnode.children;constch=vnode.瀛╁瓙浠?//璋冪敤鏇存柊閽╁瓙if(vnode.data){updateAttrs(oldVnode,vnode);updateClass(oldVnode,vnode);updateEventListeners(oldVnode,vnode);updateProps(oldVnode,vnode);updateStyle(oldVnode,vnode);//鍒ゆ柇鏄惁涓烘枃鏈妭鐐箎elseif(isDef(ch)){if(isDef(oldVnode.text))api.setTextContent(elm,'')addVnodes(elm,null,ch,0,ch.length-1,insertedVnodeQueue)}elseif(isDef(oldCh)){removeVnodes(elm,oldCh,0,oldCh.length-1)}elseif(isDef(oldVnode.text)){api.setTextContent(elm,'')}}elseif(oldVnode.text!==vnode.text){api.setTextContent(elm,vnode.text)}}琛ヤ笂Ding瀹為檯涓婅皟鐢ㄤ簡鍚勭updateXXX()鍑芥暟鏉ユ洿鏂扮湡瀹瀌om鐨勫悇涓睘鎬с€傛瘡涓洿鏂板嚱鏁伴兘绫讳技銆備互updateAttrs()涓轰緥锛歿}甯搁噺灞炴€?vnode.data.attrs||{}//涓猴紙灞炴€т腑鐨勯敭锛夋洿鏂?娣诲姞灞炴€cur=attrs[key]old=oldAttrs[key]if(old!==cur){if(booleanAttrsDict[key]&&cur==null){elm.removeAttribute(key)}else{elm.setAttribute(key,cur)}}}//鍒犻櫎鏂拌妭鐐筃on-existingattributefor(keyinoldAttrs){if(!(keyinattrs)){elm.removeAttribute(key)}}}灞炴€э紙Attribute锛夌殑鏇存柊鍑芥暟鐨勫ぇ鑷存€濊矾鏄細閬嶅巻vnode灞炴€э紝濡傛灉涓巓ldVnode涓嶅悓锛屽垯璋冪敤setAttribute()杩涜淇敼锛涢亶鍘唎ldVnode灞炴€э紝濡傛灉涓嶅湪vnode灞炴€т腑锛屽垯璋冪敤removeAttribute()鍒犻櫎銆備綘浼氬彂鐜版湁涓€涓猙ooleanAttrsDict[key]鐨勫垽鏂紝鐢ㄦ潵鍒ゆ柇鏄惁鍦ㄥ竷灏斿睘鎬у瓧鍏镐腑銆俒'allowfullscreen','async','autofocus','autoplay','checked','compact','controls','declare',......]eg:锛屽鏋滀綘鎯冲叧闂嚜鍔ㄦ挱鏀撅紝浣犻渶瑕佸幓鎺夎繖涓睘鎬с€傛墍鏈夌殑鏁版嵁閮芥瘮瀵瑰畬浜嗭紝灏辫姣斿瀛愯妭鐐逛簡銆傞鍏堝垽鏂綋鍓峷node鏄惁涓烘枃鏈妭鐐广€傚鏋滄槸鏂囨湰鑺傜偣锛屽垯涓嶉渶瑕佽€冭檻瀛愯妭鐐圭殑姣旇緝锛涘鏋滄槸鍏冪礌鑺傜偣锛岄渶瑕佽€冭檻涓夌鎯呭喌锛氭柊鏃ц妭鐐归兘鏈夊瓙鑺傜偣锛屽垯杩涘叆瀛愯妭鐐规瘮杈冿紙diff绠楁硶锛夛紱濡傛灉鏂拌妭鐐规湁瀛愯妭鐐硅€屾棫鑺傜偣娌℃湁锛屽垯寰幆鍒涘缓涓€涓猟om鑺傜偣锛涘鏋滄柊鑺傜偣娌℃湁瀛愯妭鐐硅€屾棫鑺傜偣鏈夛紝鍒欏惊鐜垹闄om鑺傜偣銆傚悗涓ょ鎯呭喌姣旇緝绠€鍗曪紝鎴戜滑鐩存帴鍒嗘瀽绗竴绉嶆儏鍐碉紝瀛愯妭鐐圭殑姣旇緝銆俤iff绠楁硶鍒嗚妭鐐规瘮杈冭繖閮ㄥ垎浠g爜姣旇緝澶氾紝鍏堣鍘熺悊鍐嶈创浠g爜銆傚厛鐪嬩竴寮犲瓙鑺傜偣瀵规瘮鍥撅細鍥句腑鐨刼ldCh鍜宯ewCh鍒嗗埆浠h〃鏂版棫瀛愯妭鐐规暟缁勶紝瀹冧滑閮芥湁鑷繁鐨勫ご灏炬寚閽坥ldStartIdx銆乷ldEndIdx銆乶ewStartIdx銆乶ewEndIdx銆傛暟缁勫瓨鏀緑node锛屾柟渚跨悊瑙c€備唬鍏銆乥銆乧銆乨绛夛紝浠h〃涓嶅悓绫诲瀷鏍囩锛坉iv銆乻pan銆乸锛夌殑vnode瀵硅薄銆傚瓙鑺傜偣鐨勬瘮杈冩湰璐ㄤ笂鏄竴涓瘮杈冨ご灏捐妭鐐圭殑寰幆銆傚惊鐜粨鏉熺殑鏍囧織鏄細鏃х殑瀛愯妭鐐规暟缁勬垨鑰呮柊鐨勫瓙鑺傜偣鏁扮粍宸茬粡閬嶅巻瀹屾瘯锛堝嵆oldStartIdx>oldEndIdx||newStartIdx>newEndIdx锛夈€傜湅鐪嬪惊鐜繃绋嬶細绗竴姝ユ槸澶村澶存瘮杈冦€傚鏋滅浉浼硷紝鍒欐棫header鍜宯ewheader鐨勬寚閽堝悜鍚庣Щ鍔紙鍗硂ldStartIdx++&&newStartIdx++锛夛紝鐪熷疄DOM涓嶅彉锛岃繘鍏ヤ笅涓€涓惊鐜紱濡傛灉涓嶇浉浼硷紝鍒欒繘鍏ョ浜屾銆傜浜屾鏄熬瀵瑰熬姣旇緝銆傚鏋滅浉浼硷紝鍒欐棫绔拰鏂扮鎸囬拡鍚戝墠绉诲姩锛堝嵆oldEndIdx--&&newEndIdx--锛夛紝鐪熷疄dom涓嶅彉锛岃繘鍏ヤ笅涓€涓惊鐜紱濡傛灉涓嶇浉浼硷紝鍒欒繘鍏ョ涓夋銆傜涓夋鏄ご灏炬瘮杈冦€傚鏋滅浉浼硷紝鏃х殑澶存寚閽堝悜鍚庣Щ鍔紝鏂扮殑灏炬寚閽堝悜鍓嶇Щ鍔紙鍗硂ldStartIdx++&&newEndIdx--锛夛紝鏈‘璁om搴忓垪涓殑澶寸Щ鍔ㄥ埌鏈熬锛岃繘鍏ヤ笅涓€涓惊鐜紱濡傛灉涓嶇浉浼硷紝鍒欒繘鍏ョ鍥涙銆傜鍥涙鏄熬閮ㄦ瘮杈冦€傚鏋滅浉浼硷紝鏃у熬鎸囬拡鍚戝墠绉诲姩锛屾柊澶存寚閽堝悜鍚庣Щ鍔紙鍗硂ldEndIdx--&&newStartIdx++锛夛紝鏈‘璁om搴忓垪涓殑灏剧Щ鍔ㄥ埌澶达紝杩涘叆涓嬩竴涓惊鐜紱濡傛灉涓嶇浉浼硷紝鍒欒繘鍏ョ浜旀銆係tep5濡傛灉璇ヨ妭鐐规湁key锛屽苟涓斿湪鏃х殑瀛愯妭鐐规暟缁勪腑鎵惧埌sameVnode锛坱ag鍜宬ey鐩稿悓锛夛紝鍒欏皢鍏禿om绉诲姩鍒板綋鍓嶇湡瀹瀌om搴忓垪鐨勫ご閮紝骞跺皢鏂扮殑澶撮儴鎸囬拡鍚戝悗绉诲姩锛堝嵆newStartIdx++);鍚﹀垯锛屽皢璇node(vnode[newStartIdx].elm)瀵瑰簲鐨刣om鎻掑叆鍒板綋鍓嶇湡瀹瀌om搴忓垪鐨勫ご閮紝骞跺皢鏂扮殑澶撮儴鎸囬拡鍚庣Щ(鍗硁ewStartIdx++)銆傚厛鏉ョ湅鐪嬫病鏈夐挜鍖欑殑鎯呭喌锛屾斁涓姩鍥剧湅寰楁洿娓呮锛佺浉淇$湅瀹屽浘鐗囧ぇ瀹惰兘鏇村ソ鐨勭悊瑙iff绠楁硶鐨勬湰璐紝鏁翠釜杩囩▼涔熸瘮杈冪畝鍗曘€備笂鍥句腑涓€鍏辫繘鍏ヤ簡6涓惊鐜紝娑夊強鍒版瘡涓€绉嶆儏鍐碉紝鎴戜竴涓€鎻忚堪锛氱涓€娆℃槸head鐩镐技锛堥兘鏄痑锛夛紝dom涓嶅彉锛屾柊鏃уご鎸囬拡鍚戝悗绉诲姩銆傝妭鐐筧纭鍚庯紝鐪熷疄鐨刣om搴忓垪涓猴細a,b,c,d,e,f锛屾湭纭鐨刣om搴忓垪涓猴細b,c,d,e,f锛涚浜屾鍜宼ail绫讳技锛堥兘鏄痜锛夛紝dom涓嶅彉锛屾柊鏃ail鎸囬拡閮藉悜鍓嶇Щ鍔ㄣ€俧鑺傜偣纭鍚庯紝鐪熷疄鐨刣om搴忓垪涓猴細a,b,c,d,e,f锛屾湭纭鐨刣om搴忓垪涓猴細b,c,d,e锛涚涓夋浠巋ead鍒皌ail绫讳技锛堥兘鏄痓锛夛紝褰撳墠灏嗗墿浣欑湡瀹濪OM搴忓垪涓殑head绉诲姩鍒版湯灏撅紝鏃х殑head鎸囬拡鍚戝悗绉诲姩锛屾柊鐨則ail鎸囬拡鍚戝墠绉诲姩銆傝妭鐐筨琚‘璁ゅ悗锛岀湡瀹炵殑dom搴忓垪涓猴細a,c,d,e,b,f锛屾湭纭鐨刣om搴忓垪涓猴細c,d,e锛涚鍥涙鏈熬绫讳技锛堥兘鏄痚锛夛紝灏嗗綋鍓嶅墿浣欑殑realdom搴忓垪涓殑tail绉诲姩鍒癶ead锛屾棫鐨則ail鎸囬拡鍓嶇Щ锛屾柊鐨刪ead鎸囬拡鍚庣Щ銆俥鑺傜偣纭鍚庯紝鐪熷疄鐨刣om搴忓垪涓猴細a,e,c,d,b,f锛屾湭纭鐨刣om搴忓垪涓猴細c,d锛涚浜旀涓嶇浉浼硷紝鐩存帴鎻掑叆鍒版湭纭dom搴忓垪鐨勫ご閮ㄣ€俫鑺傜偣鎻掑叆鍚庯紝鐪熷疄dom搴忓垪涓猴細a,e,g,c,d,b,f锛屾湭纭dom搴忓垪涓猴細c,d锛涚鍏灏变笉绫讳技浜嗭紝鐩存帴鎻掑叆鍒版湭纭鐨刣om搴忓垪澶撮儴銆俬鑺傜偣鎻掑叆鍚庯紝鐪熷疄dom搴忓垪涓猴細a,e,g,h,c,d,b,f锛屾湭纭dom搴忓垪涓猴細c,d锛涗絾鏄惊鐜粨鏉熷悗锛屾湁涓ょ鎯呭喌闇€瑕佽€冭檻锛歯ew瀛楄妭鐐规暟缁勶紙newCh锛夊凡缁忛亶鍘嗗畬姣曪紙newStartIdx>newEndIdx锛夈€傜劧鍚庨渶瑕佸垹闄ゅ浣欑殑鏃om锛坥ldStartIdx->oldEndIdx锛夛紝涔熷氨鏄笂渚嬩腑鐨刢,d锛涙柊鐨勫瓧鑺傜偣鏁扮粍锛坥ldCh锛夊凡缁忚閬嶅巻锛坥ldStartIdx>oldEndIdx锛夈€傜劧鍚庝綘闇€瑕佹坊鍔犳墍鏈夐澶栫殑鏂癲om(newStartIdx->newEndIdx)銆備笂闈㈣浜嗭紝娌℃湁閽ュ寵鐨勬儏鍐靛疄鍦ㄦ槸澶浜嗐€傛嵁璇村姞鍏?key鍙互浼樺寲v-for鐨勬€ц兘銆傚埌搴曟槸鎬庝箞鍥炰簨锛熷洜涓簐-for鍦ㄥぇ澶氭暟鎯呭喌涓嬬敓鎴愮殑tag閮芥槸鐩稿悓鐨則ag锛屽鏋滄病鏈塳ey鏍囪瘑锛屽氨鎰忓懗鐫€姣忔head-to-head姣旇緝閮借兘鎴愬姛銆傛兂涓€鎯筹紝濡傛灉鎶婃暟鎹畃ush鍒皏-for缁戝畾鐨勬暟缁勫ご閮紝閭d箞鏁翠釜dom閮戒細琚埛鏂帮紙濡傛灉鏁扮粍涓殑姣忎竴椤归兘涓嶄竴鏍凤級锛岄偅鍔犱釜key鏈夌敤鍚楋紵杩欓噷寮曠敤涓€寮犲浘锛氬湪key鐨勬儏鍐典笅锛屽叾瀹炴槸鍖归厤鎼滅储杩囩▼鐨勪竴涓澶栨楠ゃ€備篃灏辨槸涓婇潰寰幆杩囩▼鐨勭浜旀锛屽畠浼氬皾璇曞湪鑰佸瓙鑺傜偣鏁扮粍涓鎵句笌褰撳墠鏂板瓙鑺傜偣鐩镐技鐨勮妭鐐癸紝鍑忓皯瀵笵OM鐨勬搷浣滐紒鏈夊叴瓒g殑鍙互鐪嬬湅浠g爜锛歠unctionupdateChildren(parentElm,oldCh,newCh){letoldStartIdx=0letnewStartIdx=0letoldEndIdx=oldCh.length-1letoldStartVnode=oldCh[0]letoldEndVnode=oldCh[oldEndIdx]letnewEndIdx=newCh.length-1letnewStartVnode=newCh[0]letnewEndVnode=newCh[newEndIdx]letoldKeyToIdx,idxInOld,elmToMove,beforewhile(oldStartIdx<=oldEndIdx&&newStartIdx<=newEndIdx){nodeif(isUndef(oldStartVnode)){oldStart=oldCh[++oldStartIdx]//undefined鎰忓懗鐫€瀹冨凡缁忚绉诲姩浜嗙被浼间簬patchVnode(oldStartVnode,newStartVnode)oldStartVnode=oldCh[++oldStartIdx]newStartVnode=newCh[++newStartIdx]}elseif(sameVnode(oldEndVnode,newEndVnode)){//绫讳技patchVnode(oldEndVnode,newEndVnode)oldEndVnode=oldCh[--oldEndIdx]newEndVnode=newCh[--newEndIdx]}elseif(sameVnode(oldStartVnode,newEndVnode)){//澶村熬鐩镐技patchVnode(oldStartVnode,newEndVnode)api.insertBefore(parentElm,oldStartVnode.elm,api.nextSibling(oldEndVnode.elm))oldStartVnode=oldCh[++oldStartIdx]newEndVnode=newCh[--newEndIdx]}elseif(sameVnode(oldEndVnode,newStartVnode)){//绫讳技浜巔atchVnode(oldEndVnode,newStartVnode)api銆俰nsertBefore(parentElm,oldEndVnode.elm,oldStartVnode.elm)oldEndVnode=oldCh[--oldEndIdx]newStartVnode=newCh[++newStartIdx]}else{//鏍规嵁鑰佸瓙鑺傜偣鐨刱ey鐢熸垚mapif(isUndef(oldKeyToIdx))oldKeyToIdx=createKeyToOldIdx(oldCh,oldStartIdx,oldEndIdx)//鍦╫ld瀛愯妭鐐规暟缁勪腑锛屾壘鍒颁竴涓被浼间簬newStartVnode鐨勮妭鐐逛笅鏍噄dxInOld=oldKeyToIdx[newStartVnode.key]if(isUndef(idxInOld)){//娌℃湁key,鍒涘缓鍜屾彃鍏omapi.insertBefore(parentElm,createElm(newStartVnode),oldStartVnode.elm)newStartVnode=newCh[++newStartIdx]}else{//鏈塳ey锛屾壘鍒板搴旂殑dom锛岀Щ鍔╠om锛屽湪oldCh涓缃负undefinedelmToMove=oldCh[idxInOld]patchVnode(elmToMove,newStartVnode)oldCh[idxInOld]=鏈畾涔夌殑API銆俰nsertBefore(parentElm,elmToMove.elm,oldStartVnode.elm)newStartVnode=newCh[++newStartIdx]}}}//鍦ㄥ惊鐜粨鏉熸椂锛屽垹闄?娣诲姞棰濆鐨刣omif(oldStartIdx>oldEndIdx){before=isUndef(newCh[newEndIdx+1])锛焠ull:newCh[newEndIdx+1].elmaddVnodes(parentElm,before,newCh,newStartIdx,newEndIdx,insertedVnodeQueue)}elseif(newStartIdx>newEndIdx){removeVnodes(parentElm,oldCh,oldStartIdx,oldEndIdx)}}璇诲畬杩欑瘒鏂囩珷鍚庣殑鏈€鍚庡笇鏈涘姣斾竴涓媣irtualdom锛屼綘灏变細鏈変竴瀹氱殑浜嗚В锛佹湁閿欒璁板緱鎮勬倓鍛婅瘔鎴戝搱鍝堬紝鏂囩瑪杩樻槸涓嶈锛屽笇鏈涘ぇ瀹惰皡瑙(锔讹缚锔?o鑺变簡涓や釜鏈堝啓浜?绡囥€傘€傘€傛墽琛屽姏鐪熺殑寰堜僵鏈嶏紒浣嗘槸鍙戠幇鍐欏崥瀹㈠ソ鍍忕湡鐨勫緢璐规椂闂?鈹琠鈹?锛屼笉杩囦互鍚庤偗瀹氫細澶氬啓锛屽墠涓ゅ懆锛燄煒?/p>