V-for灏卞湴澶嶇敤鍘熺悊銆佽櫄鎷烡OM銆丏iff绠楁硶锛?/a>

Posted Crushdada

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了V-for灏卞湴澶嶇敤鍘熺悊銆佽櫄鎷烡OM銆丏iff绠楁硶锛?/a>相关的知识，希望对你有一定的参考价值。

V-for灏卞湴澶嶇敤鍘熺悊

涓句釜馃尠锛?/p>

<div聽v-for="(item,index)聽in聽items">
聽聽<input聽/>
聽聽<button聽@click="del(index)">delthis</button>
聽聽{{item.message}}
</div>

JS閮ㄥ垎

//data閲岄潰鐨刬tems
items:聽[  
聽聽{聽聽message:聽"1"聽},
聽聽{聽聽message:聽"2"聽},
聽聽{聽聽message:聽"3"聽},
  {聽聽message:聽"4"聽},
],
//methods涓殑del鏂规硶
del(index)聽{
聽聽this.items.splice(index,聽1); //鏍规嵁浼犲叆鐨刬ndex鍒犳帀items涓搴旀暟鎹?},

鏁堟灉濡備笅

鍙互鍙戠幇锛?/p>

  • 褰撳垹鎺塱tems涓殑绗簩涓璞℃椂锛岃緭鍏ユ涓殑鍊艰繕鏄?--杩欐剰鍛崇潃娌℃湁鍒犻櫎瀵瑰簲鐨勭浜屼釜鑺傜偣銆傝繖鏄洜涓簐ue閲囩敤铏氭嫙DOM+diff绠楁硶瀵艰嚧鐨勬暟鎹贩涔便€?/li>

  • vue鐩戝惉鍒癷tems鏁扮粍涓皯浜嗕釜鍏冪礌鍚庯紝浼氭洿鏂拌櫄鎷烡OM锛岀劧鍚庝娇鐢╠iff绠楁硶姣旇緝鏂般€佹棫DOM鏍戯紝鍦ㄨ繖涓繃绋嬩腑锛岀敱浜庤璁＄畻鍑虹湡瀹濪OM鏍戠殑鏈€灏忓彉鏇磋妯?/strong>锛屽洜姝や細灏藉彲鑳?strong>澶嶇敤宸叉湁鐨勮妭鐐?/strong>(濡傛灉鑺傜偣绫诲瀷鐩稿悓)

    姝ゅ锛屾垜浠殑闇€姹傚綋鐒舵槸涓嶅鐢ㄨ妭鐐癸紝閭ｈ濡備綍瀹炵幇鍛紵

    :key瑙ｅ喅v-for瀵艰嚧鐨勬暟鎹贩涔?/h2>

  • 鍦ㄦ覆鏌撳垪琛ㄦ椂锛屼负姣忎釜鍏冪礌缁戝畾鐙竴鏃犱簩鐨刱ey锛岃繖鏍凤紝vue鍦ㄦ洿鏂扮粡v-for娓叉煋杩囩殑鍒楄〃鏃讹紝鐢变簬key鍊间笉鍚岋紝浼氳涓烘槸涓嶅悓鐨勮妭鐐圭被鍨嬶紝涓嶉噰鍙栧鐢ㄣ€傝繖鏍峰氨閬垮厤浜嗘暟鎹贩涔?/li>

涓轰粈涔堜笉鑳戒娇鐢ㄦ暟缁勪笅鏍囦綔涓簁ey锛?/strong>

  • 涓嶈兘浣跨敤鍚勫厓绱犵殑index浣滀负key锛屽洜涓哄綋鏂板鎴栧垹闄ゅ垪琛ㄤ腑鍏冪礌鏃讹紝鍚勯」绱㈠紩閮戒細鍙?strong>锛屼篃灏辨槸璇寸储寮曞搴斿厓绱犲彉浜嗭紝澶卞幓浜嗘爣璇嗙殑鍞竴鎬?/strong>

    澹版槑寮忔覆鏌?/strong>

Vue 鎻愪緵涓€濂楀熀浜?HTML 鐨勬ā鏉胯娉?鍏佽寮€鍙戣€呭０鏄庡紡鍦板皢鐪熷疄 DOM 涓?Vue 瀹炰緥鐨勬暟鎹粦瀹氬湪涓€璧?/strong>銆?/p>

"澹版槑寮? 鐨勬剰鎬濆氨鏄? 鍙渶瑕佹寚鍑虹洰鏍? 鑰屼笉鐢ㄥ叧蹇冨浣曞疄鐜帮紝灏嗗疄鐜颁氦鐢眝ue澶勭悊

铏氭嫙DOM

  • Vdom(virtual dom),鍙互鐪嬩綔鏄竴涓?strong>浣跨敤javascript妯℃嫙浜咲OM缁撴瀯鐨勬爲褰㈢粨鏋?/strong>

    • 鍏朵腑Vnode鑺傜偣瀵瑰簲鐪熷疄DOM鑺傜偣

  • Vdom鏍?strong>鐢ㄤ簬缂撳瓨鐪熷疄DOM鏍戠殑鎵€鏈変俊鎭?/strong>

    涓轰粈涔堣閲囩敤铏氭嫙DOM锛?/blockquote>

涓€鍒囦负浜嗘€ц兘銆?/p>

鈥滅洿鎺ユ搷浣?DOM 鎬ц兘宸€濓紝杩欐槸鍥犱负 鈥斺€?/p>

  1. DOM 寮曟搸銆?strong>JS 寮曟搸鐩镐簰鐙珛锛屼絾鍙堝伐浣滃湪鍚屼竴绾跨▼锛堜富绾跨▼锛夛紝鍥犳JS 浠ｇ爜璋冪敤DOM API鏃跺繀椤?em>鎸傝捣 JS 寮曟搸銆佹縺娲?DOM 寮曟搸锛屽畬鎴愬悗鍐嶈浆鎹㈠埌 JS 寮曟搸
  2. 寮曟搸闂村垏鎹㈢殑浠ｄ环浼氳繀閫熺Н绱?/li>
  3. 寮哄埗閲嶆帓鐨?strong>DOM API璋冪敤锛屽摢鎬曞彧鏀瑰姩涓€涓妭鐐癸紝涔熶細寮曡捣鏁翠釜DOM鏍戦噸鎺?/strong>锛?strong>閲嶆柊璁＄畻甯冨眬銆?strong>閲嶆柊缁樺埗鍥惧儚浼氬紩璧锋洿澶х殑鎬ц兘娑堣€?/li>

鎵€浠ワ紝闄嶄綆寮曟搸鍒囨崲棰戠巼(鍑忓皯DOM鎿嶄綔娆℃暟)銆?strong>鍑忓皬 DOM 鍙樻洿瑙勬ā鎵嶆槸DOM 鎬ц兘浼樺寲鐨勪袱涓叧閿偣銆?/p>

铏氭嫙 DOM +diff绠楁硶鏄竴绉嶅彲閫夌殑瑙ｅ喅鏂规

鍩烘湰鎬濊矾锛氣€?strong>鍦?JS 涓?strong>缂撳瓨蹇呰鏁版嵁锛?strong>璁＄畻鐣岄潰鏇存柊鏃剁殑鏁版嵁宸紓锛屽彧鎻愪氦鏈€缁?/strong>宸泦鈥濄€?/p>

  • 铏氭嫙dom鍙敤浜庣紦瀛橈紝鑰?/li>

  • diff绠楁硶璐熻矗--

    • 璁＄畻鍑衡€樿櫄鎷焏om鍜岀洰鍓嶇湡瀹濪OM涔嬮棿鐨勬暟鎹樊寮?/strong>鈥?/li>
    • 鎻愪氦鏈€缁堝樊闆?/li>
    娉ㄦ剰锛氣€滃崟绾疺DOM鏄彁楂樹笉浜嗘€ц兘鐨勶紝VDOM涓昏浣滅敤鍦ㄤ簬瀹冪殑浜屾鎶借薄鎻愪緵浜嗕竴涓猟iff/patch鍜宐atch commit(鎵归噺鎻愪氦)鐨勬満浼氣€?/blockquote>

watcher鐨勮妭娴佹晥鏋滐細鍊熷姪watcher鍝嶅簲寮忓師鐞嗭紝浣挎暟鎹紓姝ユ洿鏂?婊炲悗鏇存柊)锛岃兘澶熷疄鐜拌妭娴佹晥鏋滐紝鍦ㄤ竴娈垫椂闂村唴锛屽厑璁稿娆℃洿鏂拌櫄鎷烡OM锛岀劧鍚庝竴娆℃€atch鍒扮湡瀹濪OM鏍戙€傚儚鏄娇鐢ㄧ簿鐏靛浘浠ュ噺灏戣姹傛鏁伴偅鏍凤紝杈惧埌浼樺寲鎬ц兘鐨勭洰鐨勩€?/p>

vue鍦ㄧ洃鍚埌鏁版嵁鍙樺姩鍚庯紝浼氬皢渚濊禆璇ユ暟鎹殑watcher鍔犲叆寰换鍔￠槦鍒楋紝鐢变簬寰换鍔℃槸寮傛鐨勶紝鍥犳鎵€鏈夊悓姝ユ洿鏂版暟鎹殑鎿嶄綔锛岄兘浼氬強鏃跺湴鍦ㄥ井浠诲姟闃熷垪涓殑浠诲姟鏇存柊鍓嶈Е鍙憌atcher鍝嶅簲锛屾崲涓娉曪細鎵ц绗竴娆″彉鍔ㄥ悗鐨勬瘡娆″彉鍔ㄩ兘浼氭洿鏂皐atcher涓殑鍚勯」渚濊禆銆傝繖鏍风殑璇濓紝鍦ㄨ寰换鍔℃墽琛屽畬姣曚箣鍓嶇殑杩欐鏃堕棿锛屽氨鐩稿綋浜庤妭娴佷腑鐨勬椂寤朵簡

Vdom鐨凞iff绠楁硶

diff绠楁硶鐨勪袱涓牳蹇冿細

  1. 涓や釜鐩稿悓鐨勭粍浠朵骇鐢熺被浼肩殑DOM缁撴瀯锛屼笉鍚岀殑缁勪欢浜х敓涓嶅悓鐨凞OM缁撴瀯銆?/li>
  2. 鍚屼竴灞傜骇鐨勪竴缁勮妭鐐癸紝浠栦滑鍙互閫氳繃鍞竴鐨刱ey杩涜鍖哄垎銆?/li>

diff绠楁硶鐨勫鏉傚害

  • 姣旇緝涓ゆ５铏氭嫙DOM鏍戠殑宸紓鏄疺irtual DOM绠楁硶鏈€鏍稿績鐨勯儴鍒嗭紝杩欎篃鏄墍璋撶殑 VirtualDOM鐨刣iff 绠楁硶銆備袱涓爲鐨勫畬鍏ㄧ殑diff 绠楁硶鏄竴涓椂闂村鏉傚害涓?strong>O(n^3)鐨勯棶棰樸€?/li>

  • 浣嗘槸鍦ㄥ墠绔綋涓紝浣犲緢灏戜細璺ㄨ秺灞傜骇鍦扮Щ鍔―OM鍏冪礌銆傛墍diff绠楁硶鍙細瀵瑰悓涓€涓眰绾х殑鍏冪礌杩涜瀵规瘮銆備笅闈㈢殑div鍙細鍜屽悓涓€灞傜骇鐨刣iv瀵规瘮锛岀浜屽眰绾х殑鍙細璺熺浜屽眰绾у姣斻€傝繖鏍风畻娉曞鏉傚害灏卞彲浠ヨ揪鍒?strong>O(n)銆?/p>

    姣旇緝鏃惰兘鍚﹀鐢ㄧ殑閫昏緫

褰撻〉闈㈢殑鏁版嵁鍙戠敓鍙樺寲鏃讹紝Diff绠楁硶鍙細姣旇緝鍚屼竴灞傜骇鐨勮妭鐐癸細
  • 濡傛灉鑺傜偣绫诲瀷涓嶅悓锛岀洿鎺ュ共鎺夋棫鐨勮妭鐐癸紝鍒涘缓骞舵彃鍏ユ柊鐨勯偅涓妭鐐癸紝涓嶄細鍐嶆瘮杈冭繖涓妭鐐逛互鍚庣殑瀛愯妭鐐逛簡銆?/li>

  • 濡傛灉鑺傜偣绫诲瀷鐩稿悓锛屽垯浼氱洿鎺ュ鐢ㄨ鑺傜偣锛岄噸鏂拌缃鑺傜偣鐨勫睘鎬э紝浠庤€屽疄鐜拌妭鐐圭殑鏇存柊銆?/p>

    褰撴煇涓€灞傛湁寰堝鐩稿悓鐨勮妭鐐规椂锛屼篃灏辨槸鍒楄〃鑺傜偣鏃讹紝Diff绠楁硶鐨勬洿鏂拌繃绋嬮粯璁ゆ儏鍐典笅涔熸槸閬靛惊浠ヤ笂鍘熷垯銆?/blockquote>

姣斿--鎴戜滑甯屾湜鍙互鍦˙鍜孋涔嬮棿鍔犱竴涓狥

Diff绠楁硶榛樿鎵ц璧锋潵鏄繖鏍风殑锛?/p>

  • 鑰佺殑Vdom鏍戠殑璇ュ眰涓婃湁6涓妭鐐癸紝鏂扮殑Vdom鏍戜笂鏈?涓被鍨嬬浉鍚岀殑鑺傜偣锛岄偅涔堝氨渚濇澶嶇敤鐪熷疄DOM鏍戣灞備笂鐨勫搴旂殑鍓?涓妭鐐癸紝鍦ㄦ渶鍚庡啀鏂板缓涓€涓妭鐐癸紝璧嬩簣涔嬪墠鑺傜偣E鐨勫睘鎬с€?/li>
  • 鍗虫妸C鏇存柊鎴怓锛孌鏇存柊鎴怌锛孍鏇存柊鎴怐锛屾渶鍚庡啀鎻掑叆E锛屾槸涓嶆槸寰堟病鏈夋晥鐜囷紵

鎵€浠ユ垜浠渶瑕佷娇鐢╧ey鏉ョ粰姣忎釜鑺傜偣鍋氫竴涓敮涓€鏍囪瘑锛岃繖鏍穠ue浼氭妸浠栦滑褰撳仛鏄笉鍚岀殑鑺傜偣锛屽洜姝や笉浼氬鐢紝diff绠楁硶浼?strong>鐩存帴鍒涘缓鏂扮殑鑺傜偣锛屽苟鎻掑叆姝ｇ‘鐨勪綅缃?/p>

key鐨勪綔鐢?/h3>
  • key鐨勪綔鐢ㄤ富瑕佹槸涓轰簡楂樻晥鐨勬洿鏂拌櫄鎷烡OM銆?/strong>
  • 涔熷彲閬垮厤鐩存帴澶嶇敤v-for鍑烘潵鐨勮妭鐐癸紝閬垮厤鏁版嵁娣蜂贡
  • 鍙﹀vue涓湪浣跨敤鐩稿悓鏍囩鍚嶅厓绱犵殑杩囨浮鍒囨崲鏃讹紝涔熶細浣跨敤鍒発ey灞炴€э紝鍏剁洰鐨勪篃鏄负浜嗚vue鍙互鍖哄垎瀹冧滑锛屽惁鍒檝ue鍙細鏇挎崲鍏跺唴閮ㄥ睘鎬ц€屼笉浼氳Е鍙戣繃娓℃晥鏋溿€?/li>

patch鍒扮湡瀹濪OM

妯℃嫙瀹炵幇

濡備綍灏唙node锛堝乏杈癸級鍙樻垚鐪熷疄鐨凞OM鍏冪礌锛堝彸杈癸級

瀹炵幇濡備笅锛?/p>

let聽nodes聽=聽{
聽聽tag:聽"ul",
聽聽attrs:聽{
聽聽聽聽id:聽"list",
聽聽},
聽聽children:聽[
聽聽聽聽{
聽聽聽聽聽聽tag:聽"li",
聽聽聽聽聽聽attrs:聽{
聽聽聽聽聽聽聽聽class:聽"item",
聽聽聽聽聽聽},
聽聽聽聽聽聽children:聽["Item聽1"],
聽聽聽聽},
聽聽],
};
//瀹炵幇鏂规硶锛氶€掑綊閬嶅巻
function聽createElement(vnode)聽{
聽聽var聽tag聽=聽vnode.tag;
聽聽var聽attrs聽=聽vnode.attrs聽||聽{};
聽聽var聽children聽=聽vnode.children聽||聽[];
聽聽if聽(!tag)聽{
聽聽聽聽return聽null;
聽聽}
聽聽var聽elem聽=聽document.createElement(tag);
聽聽var聽attrName;
聽聽for聽(attrName聽in聽attrs)聽{
聽聽聽聽if聽(attrs.hasOwnProperty(attrName))聽{
聽聽聽聽聽聽elem.setAttribute(attrName,聽attrs[attrName]);
聽聽聽聽}
聽聽}
聽聽for聽(let聽i聽=聽0;聽i聽<聽children.length;聽i++)聽{
聽聽聽聽let聽childVnode聽=聽children[i];
聽聽聽聽if聽(typeof聽childVnode聽===聽"object"聽||
聽聽聽聽聽聽childVnode.constructor聽===聽Object
聽聽聽聽)聽{
聽聽聽聽聽聽elem.appendChild(createElement(childVnode));
聽聽聽聽}聽else聽{
聽聽聽聽聽聽let聽text聽=聽document.createTextNode(childVnode);
聽聽聽聽聽聽elem.appendChild(text);
聽聽聽聽聽聽break;
聽聽聽聽}
聽聽}
聽聽return聽elem;
}
let聽elem聽=聽createElement(nodes);
console.log(elem);

PS锛?/h3>

vue 鍦╬atch鏃讹紝鍦ㄤ竴涓猽pdate 鏂规硶閲岄潰璋冪敤createElment()鏂规硶锛岄€氳繃铏氭嫙鑺傜偣鍒涘缓鐪熷疄鐨?DOM 骞舵彃鍏ュ埌瀹冪殑鐖惰妭鐐逛腑锛?/p>

鐩稿綋浜?strong>鎵撹ˉ涓?/strong>鍒扮湡瀹濪OM

馃尠

鏈€鍚庯紝涓句釜鏍楀瓙姊崇悊涓€涓嬶細

璁?Vue 灏?code>name鐨勬暟鎹拰<p>鏍囩缁戝畾鍦ㄤ竴璧?

<p>Hello {{ name }}</p>
璁╂垜浠⒊鐞嗕竴涓媣ue瀵硅繖涓妭鐐筽鍜屾暟鎹墍鍋氱殑涓€鍒?/blockquote>
  • Vue 浼氭妸杩欎簺妯℃澘缂栬瘧鎴愪竴涓?strong>娓叉煋鍑芥暟render銆?/li>
  • 璇ュ嚱鏁拌璋冪敤鍚庝細娓叉煋骞朵笖杩斿洖涓€涓?strong>铏氭嫙鐨?DOM 鏍?/strong>. 杩欎釜 "鏍? 鐨勮亴璐ｅ氨鏄弿杩板綋鍓嶈鍥惧簲澶勭殑鐘舵€併€?/li>
  • 涔嬪悗鍐嶉€氳繃涓€涓?strong>Patch 鍑芥暟锛岃绠楀拰鏃ц櫄鎷焏om鏍戠殑宸泦锛屽苟閫氳繃鎵撹ˉ涓佺殑鏂瑰紡灏嗗樊闆嗕腑鐨勮櫄鎷熻妭鐐规洿鏂板埌鐪熷疄 DOM鏍戙€?/li>
  • 鍦ㄦ暣涓繃绋嬩腑, Vue 鍊熷姪鏁版嵁鍔寔鍜岃闃呰€呮ā寮?/strong>瀹炵幇鐩戝惉鐘舵€併€佷緷璧栨敹闆嗐€佷緷璧栬拷韪€氱煡鍙樺姩绛夈€?浼氫睛娴嬪湪娓叉煋杩囩▼涓墍渚濊禆鍒扮殑鏁版嵁鏉ユ簮锛屼互瀹炵幇鍙屽悜缁戝畾锛岃嚜鍔ㄦ洿鏂扮姸鎬併€?/li>

鍙傝€冿細

浜嗚В涓€涓媣-for鍘熺悊

Vue2.0 v-for 涓?:key 鍒板簳鏈変粈涔堢敤锛?/a>

Vue--patch | 瀛ue 鐪嬭繖涓氨澶熶簡

https://www.zhihu.com/question/324992717/answer/690011952

vue鑰冪偣 鈥斺€?Diff绠楁硶

鏃㈢劧鐢?virtual dom 鍙互鎻愰珮鎬ц兘锛屼负浠€涔堟祻瑙堝櫒涓嶇洿鎺ヨ嚜甯﹁繖涓姛鑳藉憿锛?-姘存瓕 | 鐭ヤ箮

浣犱笉鐭ラ亾鐨凴eact 鍜?Vue 鐨?0涓尯鍒€愰潰璇曞繀澶囥€?/a>

vue diff绠楁硶 patch

diff绠楁硶涓殑姒傚康

以上是关于V-for灏卞湴澶嶇敤鍘熺悊銆佽櫄鎷烡OM銆丏iff绠楁硶锛?/a>的主要内容，如果未能解决你的问题，请参考以下文章

1. feign鐨勪娇鐢ㄥ強鍘熺悊

涓€鏂囧甫浣犱簡瑙ue涔嬭櫄鎷焏om

IO澶氳矾澶嶇敤

Python-鍩轰簬socket鍜宻elect妯″潡瀹炵幇IO澶氳矾澶嶇敤

鑷劧璇█澶勭悊锛氭枃鏈澶勭悊銆佽瑷€妯″瀷銆丷NN

Spring Could Feign 璁捐鍘熺悊