V-forin-place复用原理、虚拟DOM、Diff算法？

JS閮ㄥ垎//itemsitemsindata:[{message:"1"},{message:"2"},{message:"3"},{message:"4"},],//鏂规硶涓殑del鏂规硶del(index){this.items.splice(index,1);//鏍规嵁浼犲叆鐨勭储寮曞垹闄tems涓搴旂殑鏁版嵁}锛屽彲浠ュ彂鐜版晥鏋滃涓嬶細鍒犻櫎items涓殑绗簩涓璞℃椂锛岃緭鍏ユ涓殑鍊间粛鐒舵槸2鈥斺€斾篃灏辨槸璇村搴旂殑绗簩涓妭鐐规槸娌℃湁鍒犻櫎銆傝繖鏄洜涓簐ue浣跨敤浜嗚櫄鎷烡OM+diff绠楁硶锛岄€犳垚鏁版嵁娣蜂贡銆俈ue浼氬湪妫€娴嬪埌items鏁扮粍涓己灏戞煇涓厓绱犳椂鏇存柊铏氭嫙DOM锛岀劧鍚庝娇鐢╠iff绠楁硶姣旇緝鏂版棫DOM鏍戙€傚湪杩欎釜杩囩▼涓紝浼氳秺澶嶆潅瓒婂ソ锛屽洜涓洪渶瑕佽绠楃湡瀹濪OM鏍戠殑鏈€灏忓彉鍖栬妯′娇鐢ㄥ凡鏈夌殑鑺傜偣锛堝鏋滆妭鐐圭被鍨嬬浉鍚岀殑璇濓級杩欓噷锛屾垜浠殑瑕佹眰褰撶劧鏄笉閲嶇敤鑺傜偣锛屾墍浠ュ浣曞疄鐜帮紵:key瑙ｅ喅浜唙-for甯︽潵鐨勬暟鎹贩涔便€傚憟鐜板垪琛ㄦ椂锛屼负姣忎釜鍏冪礌缁戝畾涓€涓敮涓€鐨勯敭銆傝繖鏍穠ue鍦ㄦ洿鏂皏-for娓叉煋鍑烘潵鐨勫垪琛ㄦ椂锛屽洜涓簁ey鍊间笉鍚岋紝鎵€浠ヤ細璁や负鏄笉鍚岀殑銆傝妭鐐圭被鍨嬩笉閲囧彇澶氳矾澶嶇敤銆傝繖鏍峰彲浠ラ伩鍏嶆暟鎹贩娣嗐€備负浠€涔堜笉鑳界敤鏁扮粍涓嬫爣浣滀负閿細涓嶈兘鐢ㄦ瘡涓厓绱犵殑绱㈠紩浣滀负閿紝鍥犱负鍦ㄥ垪琛ㄤ腑娣诲姞鎴栧垹闄ゅ厓绱犳椂锛屾瘡涓储寮曢兘浼氭敼鍙橈紝涔熷氨鏄瀵瑰簲鐨勫厓绱犵殑绱㈠紩浼氭敼鍙樸€傛爣璇嗙殑鍞竴鎬т涪澶卞０鏄庡紡娓叉煋Vue鎻愪緵浜嗕竴濂楀熀浜嶩TML鐨勬ā鏉胯娉曪紝鍏佽寮€鍙戣€呭０鏄庡紡鍦板皢鐪熷疄鐨凞OM缁戝畾鍒癡ue瀹炰緥鐨勬暟鎹笂銆傗€滃０鏄庡紡鈥濈殑鎰忔€濇槸锛氫綘鍙渶瑕佹寚鍑虹洰鏍囷紝鑰屼笉鐢ㄥ叧蹇冨浣曞疄鐜帮紝灏嗗疄鐜颁氦缁檝ue鏉ュ鐞嗚櫄鎷烡OMVdom锛堣櫄鎷焏om锛夛紝鍙涓烘爲鐘剁粨鏋勫畠浣跨敤javascript鏉ユā鎷烡OM缁撴瀯銆俈node鑺傜偣瀵瑰簲鐪熷疄DOM鑺傜偣锛孷dom鏍戠敤浜庣紦瀛樼湡瀹濪OM鏍戠殑鎵€鏈変俊鎭€備负浠€涔堣浣跨敤铏氭嫙DOM锛熶竴鍒囦负浜嗚〃鐜般€傗€滅洿鎺ユ搷浣淒OM鎬ц兘宸€濓紝杩欐槸鍥犱负DOM寮曟搸鍜孞S寮曟搸鏄浉浜掔嫭绔嬬殑锛屼絾鏄粬浠伐浣滃湪鍚屼竴涓嚎绋嬶紙涓荤嚎绋嬶級锛屾墍浠ュ綋JS浠ｇ爜璋冪敤DOMAPI鏃讹紝JS寮曟搸蹇呴』鏆傚仠锛孌OM寮曟搸蹇呴』鍚姩锛孌OM寮曟搸瀹屾垚銆傚垏鎹㈠埌JS寮曟搸鍚庯紝寮曟搸涔嬮棿鍒囨崲鐨勬垚鏈細蹇€熺疮绉己鍒堕噸鎺掔殑DOMAPI璋冪敤銆傚嵆浣垮彧鏀瑰彉涓€涓妭鐐癸紝鏁翠釜DOM鏍戜篃浼氶噸鏂版帓鍒椼€傞噸鏂拌绠楀竷灞€骞堕噸鏂扮粯鍒跺浘鍍忓皢甯︽潵鏇撮珮鐨勬€ц兘銆傚洜姝わ紝闄嶄綆寮曟搸鍒囨崲鐨勯鐜囷紙鍑忓皯DOM鎿嶄綔鐨勬鏁帮級鍜岄檷浣嶥OM鍙樺寲鐨勫ぇ灏忔槸DOM鎬ц兘浼樺寲鐨勪袱涓噸鐐广€俈irtualDOM+diffalgorithm鏄竴涓彲閫夋柟妗堛€傚熀鏈€濊矾鏄細鈥滃湪JS涓紦瀛樺繀瑕佺殑鏁版嵁锛屽湪鐣岄潰鏇存柊鏃惰绠楁暟鎹樊寮傦紝鍙彁浜ゆ渶缁堢殑宸紓鈥濄€傝櫄鎷焏om鍙敤浜庣紦瀛橈紝diff绠楁硶璐熻矗璁＄畻鈥滆櫄鎷焏om涓庡綋鍓嶇湡瀹濪OM鐨勬暟鎹樊寮傗€濓紝骞舵彁浜ゆ渶缁堢殑宸紓銆傛敞锛氣€滅函VDOM鏃犳硶鎻愰珮鎬ц兘锛孷DOM鐨勪富瑕佷綔鐢ㄥ湪浜庡畠鐨勮繖绉嶆娊璞′负diff/patch鍜屾壒閲忔彁浜わ紙batchcommit锛夋彁渚涗簡鏈轰細鈥漺atcher鐨勮妭娴佷綔鐢細鍊熷姪watcher鐨勫搷搴斿紡鍘熷垯锛屾暟鎹寮傛鏇存柊锛坙agupdate锛夛紝鍙互杈惧埌鑺傛祦鐨勬晥鏋溿€傚湪涓€娈垫椂闂村唴锛屽厑璁稿娆℃洿鏂拌櫄鎷烡OM锛岀劧鍚庝竴娆atch鍒扮湡瀹炵殑DOM鏍戙€傚氨鍍忎娇鐢╯prites鏉ュ噺灏戣姹傛暟閲忔潵浼樺寲鎬ц兘涓€鏍枫€俈ue鐩戝惉鍒版暟鎹彉鍖栧悗锛屼細灏嗕緷璧栨暟鎹殑watcher娣诲姞鍒癿icrotask闃熷垪涓€傜敱浜庡井浠诲姟鏄紓姝ョ殑锛屾墍鏈夊悓姝ョ殑鏁版嵁鏇存柊鎿嶄綔閮戒細鍦ㄥ井浠诲姟闃熷垪涓殑浠诲姟鏇存柊涔嬪墠鍙婃椂瑙﹀彂watcher鍝嶅簲锛屾崲鍙ヨ瘽璇达細绗竴娆℃洿鏀瑰悗鐨勬瘡娆℃洿鏀归兘浼氭洿鏂拌瀵熺▼搴忎腑鐨勪緷璧栭」銆傚湪杩欑鎯呭喌涓嬶紝寰换鍔℃墽琛屽墠鐨勮繖娈垫椂闂寸浉褰撲簬鑺傛祦涓殑寤惰繜銆俈domDiff绠楁硶diff绠楁硶鐨勪袱涓牳蹇冿細涓や釜鐩稿悓鐨勭粍浠朵骇鐢熺浉浼肩殑DOM缁撴瀯锛屼笉鍚岀殑缁勪欢浜х敓涓嶅悓鐨凞OM缁撴瀯銆傚悓涓€绾у埆鐨勪竴缁勮妭鐐瑰彲浠ラ€氳繃涓€涓敮涓€鐨勯敭鏉ュ尯鍒嗐€俤iff绠楁硶鐨勫鏉傚害姣旇緝涓ゆ５铏氭嫙DOM鏍戠殑宸紓鏄疺irtualDOM绠楁硶鐨勬牳蹇冮儴鍒嗭紝涔熷氨鏄墍璋撶殑VirtualDOM鐨刣iff绠楁硶銆備袱妫垫爲鐨勫畬鍏╠iff绠楁硶鏄竴涓椂闂村鏉傚害涓篛(n^3)鐨勯棶棰樸€備絾鍦ㄥ墠绔紝鎮ㄥ緢灏戣法灞傛缁撴瀯绉诲姩DOM鍏冪礌銆俤iff绠楁硶鍙瘮杈冨悓涓€绾у埆鐨勫厓绱犮€備笅闈㈢殑div鍙細鍜屽悓绾у埆鐨刣iv姣旇緝锛屼簩绾х殑鍙細鍜屼簩绾ф瘮杈冦€傝繖鏍凤紝绠楁硶鐨勫鏉傚害鍙互杈惧埌O(n)銆傛瘮杈冩槸鍚﹀彲浠ュ鐢ㄧ殑閫昏緫褰撻〉闈㈡暟鎹彂鐢熷彉鍖栨椂锛孌iff绠楁硶鍙細姣旇緝鍚岀骇鐨勮妭鐐癸細濡傛灉鑺傜偣绫诲瀷涓嶅悓锛岀洿鎺ユ潃鎺夋棫鑺傜偣锛屽垱寤哄苟鎻掑叆鏂拌妭鐐癸紝浠ュ強涓嶄細鍐嶆瘮杈冭繖涓妭鐐逛箣鍚庣殑瀛愯妭鐐广€傚鏋滆妭鐐圭被鍨嬬浉鍚岋紝鍒欑洿鎺ュ鐢ㄨ鑺傜偣锛屽苟閲嶇疆璇ヨ妭鐐圭殑灞炴€э紝瀹炵幇鑺傜偣鐨勬洿鏂般€傚綋涓€涓眰鏈夊緢澶氱浉鍚岀殑鑺傜偣锛屽嵆鍒楄〃鑺傜偣鏃讹紝Diff绠楁硶鐨勬洿鏂拌繃绋嬩篃榛樿閬靛惊涓婅堪鍘熷垯銆傛瘮濡傗€斺€旀垜浠笇鏈涘湪B鍜孋涔嬮棿鍔犲叆涓€涓狥Diff绠楁硶锛岄粯璁ゆ墽琛屾槸杩欐牱鐨勶細鑰乂dom鏍戣繖涓€灞傛湁6涓妭鐐癸紝鏂癡dom鏍戞湁7涓浉鍚岀被鍨嬬殑鑺傜偣銆傜劧鍚庡氨渚濇澶嶇敤鐪熷疄DOM鏍戣繖涓€灞傚搴旂殑鍓?涓妭鐐癸紝骞跺湪鏈熬鏂板缓涓€涓妭鐐癸紝璧嬪€煎墠涓€涓妭鐐笶鐨勫睘鎬с€傚嵆鏇存柊C涓篎锛孌鏇存柊涓篊锛孍鍒癉锛屾渶鍚庢彃鍏锛屾槸涓嶆槸寰堜綆鏁堬紵鎵€浠ユ垜浠渶瑕佺敤key涓烘瘡涓妭鐐瑰仛涓€涓敮涓€鐨勬爣璇嗭紝杩欐牱Vue浼氭妸瀹冧滑褰撴垚涓嶅悓鐨勮妭鐐癸紝杩欐牱灏变笉浼氳閲嶅浣跨敤銆俤iff绠楁硶灏嗙洿鎺ュ垱寤轰竴涓柊鑺傜偣骞舵彃鍏ユ纭殑浣嶇疆閿€傜殑浣滅敤涓昏鏄珮鏁堟洿鏂拌櫄鎷烡OM銆備篃鍙互閬垮厤鐩存帴澶嶇敤v-for涓殑鑺傜偣锛岄伩鍏嶆暟鎹贩娣嗐€傚彟澶栵紝鍦╲ue涓鍏锋湁鐩稿悓鏍囩鍚嶇殑鍏冪礌杩涜transition鏃讹紝涔熶細鐢ㄥ埌key灞炴€с€傜洰鐨勪篃鏄负浜嗚vue鍖哄垎瀹冧滑锛屽惁鍒檝ue鍙細鏇挎崲瀹冪殑鍐呴儴灞炴€ц€屼笉浼氳Е鍙戣繃娓℃晥鏋溿€侾atchtorealDOMsimulation鏉ュ疄鐜板浣曞皢vnode锛堝乏锛夊彉鎴愮湡瀹炵殑DOM鍏冪礌锛堝彸锛夛紝濡備笅鎵€绀猴細tag:"li",attrs:{class:"item",},children:["Item1"],},],};//瀹炵幇鏂规硶锛氶€掑綊閬嶅巻鍑芥暟createElement(vnode){vartag=vnode.鏍囩;varattrs=vnode.attrs||{};varchildren=vnode.children||[];濡傛灉(!tag){杩斿洖null;}varelem=document.createElement(鏍囩);鍙橀噺灞炴€у悕锛沠or(attrNameinattrs){if(attrs.hasOwnProperty(attrName)){elem.setAttribute(attrName,attrs[attrName]);}}for(leti=0;i鏍囩涓婏細

Hello{{name}}

鏁寸悊涓€涓媀ue瀵硅鑺傜偣p鍜屾暟鎹仛浜嗕粈涔堛€俈ue浼氬皢杩欎簺妯℃澘缂栬瘧鎴愪竴涓覆鏌撳嚱鏁皉ender锛岃皟鐢ㄥ悗娓叉煋骞惰繑鍥炰竴涓櫄鎷烡OM鏍戙€傝繖妫碘€滄爲鈥濈殑鑱岃矗鏄弿杩板綋鍓嶈鍥惧簲璇ュ浜庣殑鐘舵€併€傜劧鍚庝娇鐢ㄤ竴涓狿atch鍑芥暟璁＄畻涓庢棫鐨勮櫄鎷焏om鏍戠殑宸紓闆嗭紝骞跺皢宸紓闆嗕腑鐨勮櫄鎷熻妭鐐规洿鏂颁负鐪熷疄鐨凞OM閫氳繃淇ˉ鏍戙€傚湪鏁翠釜杩囩▼涓紝Vue閫氳繃鏁版嵁鍔寔鍜岃闃呰€呮ā寮忓疄鐜颁簡鐘舵€佺洃鎺с€佷緷璧栨敹闆嗐€佷緷璧栬窡韪€氱煡鍙樺寲绛夛紝鍦ㄦ覆鏌撹繃绋嬩腑浼氭娴嬭嚜宸变緷璧栫殑鏁版嵁婧愶紝瀹炵幇鍙屽悜缁戝畾骞惰嚜鍔ㄦ洿鏂扮姸鎬?鍙傝€冿細浜嗚Вv-for鐨勫師鐞哣ue2.0v-for涓殑:key鏈変粈涔堢敤锛烿ue--琛ヤ竵|瀛︿範Vue锛岀湅鎳傝繖涓嚱鏁板氨澶熶簡锛?-姘村摜|鐭ラ亾浣犱笉鐭ラ亾鐨凴eact鍜孷ue鐨?0涓尯鍒€愰潰璇曞繀澶囥€憄atchdiff绠楁硶涓殑vuediff绠楁硶姒傚康