鍘熺悊浼氭湁涓€澶у爢鏂囧瓧锛岃鑰愬績缁嗙粏鍝佸懗Vue涓殑DOM鏇存柊鏈哄埗褰撲綘澶ц倖浣跨敤Vue澶ф樉韬墜鏃讹紝绐佺劧鍙戠幇锛屽搸锛屾垜鏄庢槑鏀逛簡杩欎釜鏁版嵁锛屽彲鏄嬁鍒扮殑鏃跺€欙紝鎬庝箞鍙兘鏄渶鍚庝竴涓€煎憿锛堟垜姣旇緝鎳掞紝灏变笉涓句緥浜嗮煈碉級杩欐椂鍊橵ue浼氳锛氣€滃皬鏍锋湰锛屼綘涓嶆槑鐧戒簡锛屾垜鐨凞OM鏄紓姝ユ洿鏂扮殑锛侊紒锛佲€濈畝鍗曠殑璇达紝Vue鐨勫搷搴斿紡骞朵笉鏄湪鏁版嵁鍙樺寲鍚庣珛鍗虫敼鍙楧OM锛岃€屾槸閬靛惊涓€瀹氱殑绛栫暐DOM鏇存柊锛岃繖鏍峰仛鐨勫ソ澶勬槸鍙互閬垮厤瀵笵OM杩涜涓€浜涗笉蹇呰鐨勬搷浣滐紝鎻愰珮娓叉煋鎬ц兘銆傝繖鏄疺ue瀹樻柟鏂囨。涓锛氬彲鑳戒綘娌℃湁娉ㄦ剰鍒帮紝Vue鏄紓姝ユ墽琛孌OM鏇存柊鐨勶紝鍙瑙傚療鍒版暟鎹彉鍖栵紝Vue灏变細鍚姩涓€涓槦鍒楋紝缂撳啿鎵€鏈夊彂鐢熷湪鍚屼竴涓簨浠跺惊鐜腑鐨勬暟鎹彉鍖栥€傚鏋滃悓涓€涓獁atcher琚Е鍙戝娆★紝瀹冨彧浼氳鎺ㄥ叆闃熷垪涓€娆°€傜紦鍐叉湡闂寸殑閲嶅鏁版嵁鍒犻櫎瀵逛簬閬垮厤涓嶅繀瑕佺殑璁＄畻鍜孌OM鎿嶄綔闈炲父閲嶈銆傜劧鍚庯紝鍦ㄤ笅涓€涓簨浠跺惊鐜€渢ick鈥濇椂锛孷ue鍒锋柊闃熷垪骞舵墽琛屽疄闄呯殑(deduplicated)work.澶х櫧璇濆氨鏄锛屽叾瀹炶繖璺烰S涓殑浜嬩欢寰幆瀵嗗垏鐩稿叧锛屽氨鏄疺ue涓嶅彲鑳芥妸姣忎竴涓暟鎹彉鍖栭兘娓叉煋鍑烘潵锛屽畠浼氭妸杩欎簺鍙樺寲鏀惧湪涓€涓猘sync涓鍏堟槸hronous闃熷垪锛屽畠杩樹細瀵硅繖涓槦鍒椾腑鐨勬搷浣滆繘琛屽幓閲嶃€傛瘮濡備綘淇敼浜?娆℃暟鎹紝瀹冨彧浼氫繚鐣欐渶鍚庝竴娆°€傝繖浜涘彉鍖栭兘鍙互浠ラ槦鍒楃殑褰㈠紡淇濆瓨涓嬫潵锛岄偅涔堢幇鍦ㄧ殑闂鏄紝Vue鍦ㄤ簨浠跺惊鐜腑浠€涔堟椂鍊欎慨鏀笵OM鍛紵Vue鏈変袱绉嶉€夋嫨锛屼竴绉嶆槸鍦ㄦ湰娆′簨浠跺惊鐜粨鏉熸椂鎵ц涓€娆OM鏇存柊锛屽彟涓€绉嶆槸灏咲OM鏇存柊鏀惧湪涓嬩竴杞簨浠跺惊鐜腑銆傝繖鏃讹紝娓镐簬鐔欐媿浜嗘媿鑳稿彛璇撮亾锛氣€滄垜涓ょ鍔炴硶閮芥湁锛佲€濅絾鏄洜涓鸿繖涓€杞簨浠跺惊鐜殑鏈€缁堟墽琛屼細姣斾笅涓€杞簨浠跺惊鐜揩寰堝锛孷ue鏇村€惧悜浜庣涓€绉嶏紝绗簩绉嶆満鍒跺彧鏈夊湪鐜涓嶆敮鎸佺殑鏃跺€欐墠浼氳Е鍙戙€傦紙馃憜馃憜寮€澶寸殑閾炬帴璁╀綘浜嗚В浜嬩欢寰幆锛夎櫧鐒舵€ц兘鎻愬崌浜嗕笉灏戯紝浣嗘槸杩欎釜鏃跺€欓棶棰樺氨鏉ヤ簡銆傛垜浠兘鐭ラ亾鍦ㄤ竴杞簨浠跺惊鐜腑锛岀洿鍒板悓姝ユ墽琛屾爤涓殑浠ｇ爜鎵ц瀹屾瘯锛屽悓姝ユ墽琛屾爤涓殑浠ｇ爜鎵嶄細琚墽琛屻€傞槦鍒椾腑鐨勫唴瀹癸紝閭ｄ箞鎴戜滑鑾峰彇DOM鐨勬搷浣滃氨鏄悓姝ョ殑锛侊紒鏄笉鏄櫧鐒舵垜鏀逛簡鏁版嵁锛屼絾鏄畠鐨勬洿鏂版槸寮傛鐨勶紝鎷垮埌鐨勬椂鍊欒繕娌℃潵寰楀強鏀癸紝鎵€浠ユ墠浼氬嚭鐜版枃绔犲紑澶寸殑闂銆傝繖銆?.鎴戠湡鐨勯渶瑕佽繖鏍峰仛锛岄偅涔堟垜璇ユ€庝箞鍋氬憿锛燂紵娌″叧绯伙紝娓歌揪宸茬粡涓烘垜浠彁渚涗簡Vue.$nextTick()Vue.$nextTick()銆傚叾瀹?nextTick鍙互鐢ㄤ竴鍙ヨ瘽鏉ヨВ閲婏細浣犳斁鍦?nextTick涓殑鎿嶄綔涓嶄細绔嬪嵆鎵ц锛屼絾鏄绛夋暟鎹洿鏂板拰DOM鏇存柊瀹屾垚鍚庢墠鎵ц锛岃繖鏍锋垜浠嬁鍒扮殑涓€瀹氭槸鏈€鏂扮殑銆傛洿鍑嗙‘鍦拌锛?nextTick鏂规硶灏嗗洖璋冪殑鎵ц寤惰繜鍒颁笅涓€涓狣OM鏇存柊鍛ㄦ湡銆傦紙杩欏彞璇濈湅涓嶆噦鍙互鐪嬩笂闈㈢殑[鐙楀ご]銆傦級鎰忔€濆ぇ瀹堕兘鎳傦紝閭ｄ箞$nextTick鏄浣曞畬鎴愯繖涓濂囧姛鑳界殑鍛紵鏍稿績濡備笅锛歏ue鍐呴儴灏濊瘯浣跨敤鍘熺敓鐨凱romise.then銆丮utationObserver鍜宻etImmediate鏉ュ疄鐜板紓姝ラ槦鍒椼€傚鏋滄墽琛岀幆澧冧笉鏀寔锛屽畠灏嗕娇鐢╯etTimeout(fn,0)浠ｆ浛銆備粩缁嗙湅杩欏彞璇濓紝浣犱細鍙戠幇杩欎笉浠呬粎鏄埄鐢↗avaScript涓殑杩欎簺寮傛鍥炶皟浠诲姟闃熷垪锛屽湪Vue妗嗘灦涓疄鐜拌嚜宸辩殑寮傛鍥炶皟闃熷垪銆傝繖鍏跺疄灏辨槸涓€涓吀鍨嬬殑灏咼avaScript搴曞眰鎵ц鍘熺悊搴旂敤鍒板叿浣撴渚嬩腑鐨勪緥瀛愩€傝繖閲屾€荤粨涓€涓嬶細$nextTick灏嗗洖璋冨嚱鏁版斁鍦╩icrotask鎴杕acrotask涓紝寤惰繜鍏舵墽琛岄『搴忥紱锛堟€荤粨涔熷伔鎳掟煈讹級閲嶈鐨勬槸鍦ㄦ簮鐮佷腑鐞嗚В瀹冪殑涓変釜鍙傛暟鐨勫惈涔夛細callback锛氭垜浠杩涜鐨勬搷浣滃彲浠ユ斁鍦ㄨ繖涓嚱鏁伴噷闈€傛垜浠皢鍥炶皟鍑芥暟鏀惧叆涓€涓紓姝ラ槦鍒椾腑锛岃€屼笉鎵ц涓€娆?nextTick锛沺ending锛氭爣璇嗭紝鐢ㄤ簬鍒ゆ柇鏄惁鍦ㄦ煇涓簨浠跺惊鐜腑绗竴娆″姞鍏ワ紝瑙﹀彂寮傛鎵ц闃熷垪鎸傝浇timerFunc锛氱敤浜庤Е鍙戝洖璋冨嚱鏁扮殑鎵ц锛屽嵆浜嗚ВPromise鐨勬祦绋嬪悗.then鎴栬€匨utationObserver鎴栬€卻etImmediate鎴栬€卻etTimeout锛岀湅鏁翠釜$nextTick涓殑鎵ц杩囩▼锛屽叾瀹炲氨鏄皢$nextTick涓殑鍥炶皟鍑芥暟涓€涓竴涓殑push鍒板洖璋冮槦鍒椾腑锛岀劧鍚庢牴鎹簨浠剁殑鎬ц川绛夊緟鎵ц.杞埌鎵ц鏃讹紝鎵ц瀹冿紝鐒跺悗鍦ㄥ洖璋冮槦鍒椾腑绉婚櫎瀵瑰簲鐨勪簨浠躲€傚弬鑰冿細鍓嶇vue闈㈣瘯棰樿瑙ｅ強浣跨敤璇翠簡杩欎箞澶氾紝鎬庝箞鐢ㄥ憿锛熷緢绠€鍗曞緢绠€鍗昺ounted:function(){this.$nextTick(function(){//鍙湁鍦?/鏁翠釜瑙嗗浘娓叉煋瀹屾垚鍚庢墠浼氳繍琛岀殑浠ｇ爜})}闇€瑕佸湪鍒涘缓鐨勬椂鍊欎娇鐢―OM鎿嶄綔鍦烘櫙鍦ㄦ垜浠笂闈㈢殑渚嬪瓙涓紝濡傛灉浣犳兂鑾峰彇鏈€鏂扮殑鍊硷紝浣犲彲浠ヤ娇鐢ㄥ畠銆傚湪浣跨敤杩囩▼涓繕鏈変竴浜涚涓夋柟鎻掍欢锛屼娇鐢ㄦ儏鍐碉紝鍏蜂綋闂鍏蜂綋鍒嗘瀽锛岃ˉ鍏呫€傚畠浼犲叆鐨勬柟娉曞氨鍙樻垚浜嗕竴涓猰icrotask锛岄偅涔堝畠鍜屽叾浠杕icrotasks鐨勬墽琛岄『搴忔槸鎬庢牱鐨勫憿锛熻繖鍙槸涓€涓皝鍏堟寕杞絇romise瀵硅薄鐨勯棶棰樸€傚綋璋冪敤$nextTick鏂规硶鏃讹紝鍏堕棴鍖呭唴缁存姢鐨勬墽琛岄槦鍒楀皢鎸傝浇鍒癙romise瀵硅薄銆傚綋鏁版嵁鏇存柊鏃讹紝Vue浼氬厛鎵ц$nextTick鏂规硶锛岀劧鍚庡皢鎵ц闃熷垪鎸傝浇鍒癙romise瀵硅薄涓娿€傚叾瀹炵悊瑙ｄ簡Js鐨凟ventLoop妯″瀷鍚庯紝鏁版嵁鐨勬洿鏂颁篃琚涓烘槸瀵?nextTick鏂规硶鐨勮皟鐢紝$nextTick鏂规硶浼氫竴娆℃€ф墽琛屾墍鏈夋帹閫佺殑鍥炶皟锛屼綘鍙互鐞嗚В鎵ц椤哄簭鐨勯棶棰橈紝$nextTick鍜宯extTick鐨勫尯鍒湪浜巒extTick澶氫簡涓€涓猚ontext鍙傛暟鏉ユ寚瀹氫笂涓嬫枃銆備絾鏄袱鑰呯殑鏈川鏄竴鏍风殑锛?nextTick鏄竴涓疄渚嬫柟娉曪紝鑰宯extTick鍙槸绫荤殑涓€涓潤鎬佹柟娉曪紱瀹炰緥鏂规硶鐨勪竴涓紭鐐规槸瀹冧細鑷姩涓烘偍缁戝畾鍒拌皟鐢ㄥ疄渚嬬殑this銆?/p>
