Vue-router瀵艰埅瀹堝崼鐨勫叏灞€鍓嶇/閽╁瓙鏈夊摢浜涳細beforeEach銆乥eforeResolve銆乤fterEach璺敱涓撳睘瀹堝崼锛歜eforeEnter缁勪欢涓殑瀹堝崼锛歜eforeRouteEnter銆乥eforeRouteUpdate锛屼负浠€涔坆eforeRouteLeave鍦╒ue3.0涓娇鐢≒roxy鑰屼涪寮冧簡Object.defineProperty锛烵bject.defineProperty鏈韩鏈変竴瀹氱殑鐩戝惉鏁扮粍涓嬫爣鍙樺寲鐨勮兘鍔涳紝浣嗘槸鍦╒ue涓紝鑰冭檻鍒版€ц兘/浣撻獙鐨勬€т环姣旓紝鏈夊ぇ鏀惧純浜嗚繖涓壒鎬э紙涓轰粈涔圴ue涓嶈兘妫€娴嬫暟缁勫彉鍖栵級銆備负浜嗚В鍐宠繖涓棶棰橈紝鍙互浣跨敤濡備笅鏂规硶鐩戝惉鏁扮粍push();pop();shift();unshift();splice();sort();reverse();鍙湁浠ヤ笂7绉嶆柟娉曡hack锛屾墍浠ュ叾浠栭樀娉曠殑灞炴€т篃鏄娴嬩笉鍒扮殑锛岃繕鏄湁涓€瀹氬眬闄愭€х殑銆侽bject.defineProperty鍙兘鍔寔瀵硅薄灞炴€э紝鎵€浠ユ垜浠渶瑕侀亶鍘嗘瘡涓璞＄殑姣忎釜灞炴€с€傚湪Vue2.x涓紝鏁版嵁鐩戞帶鏄€氳繃閫掑綊+閬嶅巻鏁版嵁瀵硅薄鏉ュ疄鐜扮殑銆傚鏋滃睘鎬у€间篃鏄竴涓璞★紝閭ｄ箞灏遍渶瑕佹繁搴﹂亶鍘嗐€傛樉鐒讹紝鍔寔涓€涓畬鏁寸殑瀵硅薄鏄洿濂界殑閫夋嫨銆侾roxy鍙互鍔寔鏁翠釜瀵硅薄骞惰繑鍥炰竴涓柊鐨勫璞°€侾roxy涓嶄粎鍙互浠ｇ悊瀵硅薄锛岃繕鍙互浠ｇ悊鏁扮粍銆備篃鍙互浠ｇ悊鍔ㄦ€佸鍔犵殑灞炴€с€傚墠绔繘闃堕潰璇曢璇﹁В涓轰粈涔坴-for瑕佸姞key濡傛灉涓嶅姞key锛孷ue浼氫娇鐢ㄦ渶灏忓寲鍔ㄦ€佸厓绱犵殑绠楁硶锛屽敖閲忓湪鍘熷湴淇敼/澶嶇敤鍚岀被鍨嬪厓绱犮€俴ey鏄痸node鍦╒ue涓殑鍞竴鏍囪瘑銆傛湁浜嗚繖涓猭ey锛屾垜浠殑diff鎿嶄綔灏卞彲浠ユ洿鍑嗐€佹洿蹇€佹洿鍑嗙‘锛氬洜涓簁ey娌℃湁鍘熷湴澶嶇敤锛屾墍浠ュ湪sameNode鍑芥暟涓璦.key===b.key姣旇緝鏃跺彲浠ラ伩鍏嶅師鍦板鐢ㄣ€傛墍浠ュ畠浼氭洿鍑嗙‘銆傛洿蹇細鍒╃敤key鐨勫敮涓€鎬х敓鎴恗ap瀵硅薄鑾峰彇瀵瑰簲鑺傜偣锛屾瘮閬嶅巻鏂瑰紡鏇村揩銆傚浣曚粠鐪熷疄DOM鍒拌櫄鎷烡OM锛屾秹鍙婂埌Vue涓ā鏉跨紪璇戠殑鍘熺悊銆備富瑕佽繃绋嬶細灏嗘ā鏉胯浆鎹负ast鏍戯紝ast浣跨敤瀵硅薄鏉ユ弿杩扮湡瀹炵殑JS璇硶锛堝皢鐪熷疄DOM杞崲涓鸿櫄鎷烡OM锛変紭鍖栨爲锛屼粠ast鏍戠敓鎴愪唬鐮佷负浠€涔圴ue瑕佷娇鐢ㄥ紓姝ユ覆鏌擄紵Vue鏄竴涓粍浠剁骇鍒殑鏇存柊銆傚鏋滀笉浣跨敤寮傛鏇存柊锛屽垯姣忔鏇存柊鏁版嵁鏃堕兘浼氶噸鏂版覆鏌撳綋鍓嶇粍浠躲€傚洜姝わ紝涓轰簡鎬ц兘锛孷ue浼氬湪鏈疆鏁版嵁鏇存柊鍚庡紓姝ユ洿鏂拌鍥俱€傛牳蹇冩€濇兂nextTick銆俤ep.notify()閫氱煡watcher鏇存柊锛宻ubs[i].update渚濇璋冪敤watcher鐨剈pdate锛宷ueueWatcher灏唚atcher鏀惧洖闃熷垪锛宯extTick(flushSchedulerQueue)鍦ㄤ笅涓€涓猼ick鍒锋柊watcher闃熷垪锛堝紓姝ワ級銆備负浠€涔坉ata蹇呴』鏄痸ue缁勪欢涓殑涓€涓嚱鏁帮紵璇ュ璞℃槸寮曠敤绫诲瀷銆傜粍浠跺鐢ㄦ椂锛岀敱浜庢暟鎹璞￠兘鎸囧悜鍚屼竴涓暟鎹璞★紝褰撲竴涓粍浠朵腑鐨勬暟鎹淇敼鏃讹紝鍏朵粬澶嶇敤缁勪欢涓殑鏁版嵁涔熶細鍚屾椂琚慨鏀癸紱鑰屼娇鐢ㄨ繑鍥炲璞＄殑鍑芥暟锛岀敱浜庢瘡娆￠兘杩斿洖涓€涓柊鐨勫璞★紙Object鐨勫疄渚嬶級锛屽紩鐢ㄥ湴鍧€涓嶅悓锛屾墍浠ヤ笉浼氬嚭鐜拌繖涓棶棰樸€侻VC鍜孧VVM鐨勫尯鍒玀VCMVC鐨勫叏绉版槸ModelViewController锛屾槸妯″瀷锛坢odel锛?瑙嗗浘锛坴iew锛?controller锛堟帶鍒跺櫒锛夌殑缂╁啓锛屼竴绉嶈蒋浠惰璁℃ā鍨嬫ā鍨嬶紙model锛夛細瀹冪敤鍦╝pplication澶勭悊搴旂敤绋嬪簭閮ㄥ垎鐨勬暟鎹€昏緫銆傞€氬父妯″瀷瀵硅薄璐熻矗璁块棶鏁版嵁搴撲腑鐨勬暟鎹甐iew锛堣鍥撅級锛氬簲鐢ㄧ▼搴忎腑澶勭悊鏁版嵁鏄剧ず鐨勯儴鍒嗐€傞€氬父瑙嗗浘鏄粠妯″瀷鏁版嵁鍒涘缓鐨勬帶鍒跺櫒锛坈ontroller锛夛細瀹冩槸澶勭悊鐢ㄦ埛浜や簰鐨勫簲鐢ㄧ▼搴忕殑涓€閮ㄥ垎銆傞€氬父controller璐熻矗浠巚iew涓鍙栨暟鎹紝鎺у埗鐢ㄦ埛杈撳叆锛屽皢鏁版嵁鍙戦€佺粰modelMVC鎬濇兂锛氫竴鍙ヨ瘽鎻忚堪灏辨槸controller璐熻矗鐢╲iew鏄剧ずmodel鐨勬暟鎹紝鎹㈠彞璇濊灏辨槸璧嬪€兼帶鍒跺櫒涓ā鍨嬬殑鏁版嵁缁欒鍥俱€侻VVMMMVVM娣诲姞浜嗕竴涓被浼糣M鐨刅iewModel灞傦細鍋氫簡涓や欢浜嬫潵瀹炵幇鏁版嵁鐨勫弻鍚戠粦瀹氥€備竴绉嶆槸灏哰Model]杞崲涓篬View]锛屽嵆鎶婂悗绔紶杩囨潵鐨勬暟鎹浆鎹㈡垚浣犵湅鍒扮殑椤甸潰銆傚疄鐜扮殑鏂瑰紡鏄細鏁版嵁缁戝畾銆備簩鏄皢[view]杞寲涓篬model]锛屽嵆灏嗘祻瑙堢殑椤甸潰杞寲涓哄悗鍙版暟鎹€傚疄鐜版柟寮忔槸锛欴OM浜嬩欢鐩戝惉銆侻VVM涓嶮VC鏈€澶х殑鍖哄埆鍦ㄤ簬瀹冨疄鐜颁簡View鍜孧odel鐨勮嚜鍔ㄥ悓姝ワ紝鍗冲綋Model鐨勫睘鎬у彂鐢熷彉鍖栨椂锛屾垜浠笉闇€瑕佹墜鍔ㄦ搷浣淒om鍏冪礌鏉ユ敼鍙榁iew鐨勬樉绀猴紝鑰屾槸鏀瑰彉property鏉ュ搴擵iew灞傛樉绀轰細鑷姩鍙樺寲锛堝搴擵ue鐨勬暟鎹┍鍔ㄦ€濇兂锛夈€備粠鏁翠綋涓婄湅锛孧VVM姣擬VC绮剧畝浜嗗緢澶氥€備笉浠呯畝鍖栦簡涓氬姟鍜屾帴鍙ｇ殑渚濊禆锛岃繕瑙ｅ喅浜嗘暟鎹洿鏂伴绻佺殑闂锛屼笉鍐嶉渶瑕佷娇鐢ㄩ€夋嫨鍣ㄦ潵鎿嶄綔DOM鍏冪礌銆?鍥犱负鍦∕VVM涓紝View骞朵笉鐭ラ亾Model鐨勫瓨鍦紝Model鍜孷iewModel鏃犳硶瑙傚療鍒癡iew銆傝繖绉嶄綆鑰﹀悎妯″紡鎻愰珮浜嗕唬鐮佺殑鍙噸鐢ㄦ€с€傛敞鎰忥細Vue骞朵笉瀹屽叏閬靛惊MVVM鐨勬€濇兂銆傚畼鏂圭綉绔欐湰韬篃瑙ｉ噴浜嗚繖涓棶棰樸€備负浠€涔堝畼鏂硅Vue娌℃湁瀹屽叏閬靛惊MVVM鎬濇兂鍛紵涓ユ牸鐨凪VVM瑕佹眰View涓嶈兘鐩存帴鍜孧odel閫氫俊锛岃€孷ue鎻愪緵浜嗗睘鎬?refs璁㎝odel鐩存帴鎿嶄綔View锛岃繚鍙嶄簡杩欎釜瑙勫垯锛屾墍浠ue骞舵病鏈夊畬鍏ㄩ伒寰狹VVM銆備负浠€涔圴ue浣跨敤vm.$set()鏉ヨВ鍐冲璞ew灞炴€ф棤娉曞搷搴旂殑闂锛熻兘璇磋涓嬮潰浠ｇ爜鐨勫疄鐜板師鐞嗗悧锛?锛変负浠€涔圴ue浣跨敤vm.$set()鏉ヨВ鍐冲璞＄殑new灞炴€ф棤娉曞搷搴旂殑闂锛烿ue浣跨敤Object.defineProperty瀹炵幇鍙屽悜鏁版嵁缁戝畾銆傚垵濮嬪寲瀹炰緥鏃讹紝瀹冧細瀵瑰睘鎬ф墽琛実etter/setter杞崲銆傝灞炴€у繀椤诲瓨鍦ㄤ簬鏁版嵁瀵硅薄涓娿€備负浜嗚Vue鎶婂畠杞崲鎴愬搷搴斿紡鐨勶紙杩欎篃瀵艰嚧Vue鏃犳硶妫€娴嬪埌瀵硅薄灞炴€х殑澧炲垹锛夛紝鎵€浠ue鎻愪緵浜哣ue.set(object,propertyName,value)/vm.$set(object,propertyName,value)2)鎺ヤ笅鏉ユ垜浠湅鐪嬫鏋舵湰韬槸濡備綍瀹炵幇鐨勶紵Vue婧愮爜浣嶇疆锛歷ue/src/core/instance/index.jsexportfunctionset(target:Array|Object,key:any,val:any):any{//target鏄暟缁刬f(Array.isArray(target)&&isValidArrayIndex(key)){//淇敼鏁扮粍鐨勯暱搴︼紝閬垮厤绱㈠紩>鏁扮粍闀垮害瀵艰嚧鐨剆plcie()鎵ц閿欒target.length=Math.max(target.length,key)//浣跨敤鎷兼帴绐佸彉鏁扮粍瑙﹀彂鍝嶅簲鐨勬柟娉晅arget.splice(key,1,val)returnval}//key宸茬粡瀛樺湪锛岀洿鎺ヤ慨鏀瑰睘鎬у€糹f(keyintarget&&!(keyinObject.prototype)){target[key]=valreturnval}constob=(target:any).__ob__//target鏈韩涓嶆槸鍝嶅簲寮忔暟鎹紝鐩存帴璧嬪€糹f(!ob){target[key]=valreturnval}//鍝嶅簲寮忓鐞嗗睘鎬efineReactive(ob.value,key,val)ob.dep.notify()returnval}浠庝笂闈㈢殑婧愮爜鎴戜滑鍙互鐪嬪嚭锛寁m.$set鐨勫疄鐜板師鐞嗘槸锛氬鏋渢arget鏄竴涓暟缁勶紝鐩存帴浣跨敤鏁扮粍鐨剆plice鏂规硶瑙﹀彂瀵瑰簲鐨勫叕寮?濡傛灉鐩爣鏄竴涓璞★紝棣栧厛浼氳В閲婅灞炴€ф槸鍚﹀瓨鍦紝瀵硅薄鏄惁鍝嶅簲锛屾渶鍚庡鏋滆瀵硅灞炴€ц繘琛屽搷搴斿紡澶勭悊锛屽垯闇€瑕佽皟鐢╠efineReactive鏂规硶杩涜鍝嶅簲寮忓鐞嗐€俤efineReactive鏂规硶鏄湪Vue鍒濆鍖栧璞℃椂锛屼娇鐢∣bject.defineProperty涓哄璞″睘鎬у姩鎬佹坊鍔爂etter鍜屽璞″睘鎬с€俿etter鐨勫嚱鏁拌皟鐢ㄧ殑鏂规硶鍦╒ue3.0鍜?.0鐨勫搷搴斿師鐞嗕笂鏈夋墍涓嶅悓Vue3.x浣跨敤Proxy浠ｆ浛Object.defineProperty鍥犱负Proxy鍙互鐩存帴鐩戝惉瀵硅薄鍜屾暟缁勭殑鍙樺寲锛屾嫤鎴杈?3涓柟娉曘€傜浉鍏充唬鐮佸涓媔mport{mutableHandlers}from"./baseHandlers";//浠ｇ悊鐩稿叧閫昏緫import{isObject}from"./util";//宸ュ叿鏂规硶exportfunctionreactive(target){//鏍规嵁涓嶅悓鐨勫弬鏁板垱寤轰笉鍚岀殑鍝嶅簲objectreturncreateReactiveObject(target,mutableHandlers);}functioncreateReactiveObject(target,baseHandler){if(!isObject(target)){}constobserved=newProxy(target,baseHandler);杩斿洖瑙傚療锛泒constget=createGetter();constset=createSetter();functioncreateGetter(){returnfunctionget(target,key,receiver){//杈愬皠寰楀埌鐨勫€糲onstres=Reflect.get(target,key,receiver);瀹夋叞銆俵og("璐骇鏀惰喘",key);if(isObject(res)){//濡傛灉鑾峰彇鐨勫€兼槸瀵硅薄绫诲瀷锛屽垯杩斿洖褰撳墠瀵硅薄鐨勪唬鐞嗗璞eturnreactive(res);}杩斿洖璧勬簮锛泒;}functioncreateSetter(){returnfunctionset(target,key,value,receiver){constoldValue=target[key];甯搁噺hadKey=hasOwn(target,key);constresult=Reflect.set(target,key,value,receiver);if(!hadKey){console.log("娣诲姞鏂板睘鎬?,key,value);}elseif(hasChanged(value,oldValue)){console.log("灞炴€у€煎凡淇敼",key,value);}杩斿洖缁撴灉锛泒;}exportconstmutableHandlers={get,//鑾峰彇灞炴€ч泦鏃惰皟鐢ㄦ鏂规硶锛?/淇敼灞炴€ф椂璋冪敤姝ゆ柟娉晑;鐭ラ亾Vue妯℃澘缂栬瘧鐨勫師鐞嗭紝鑳界畝鍗曚粙缁嶄竴涓嬪悧锛熺畝鍗曟潵璇达紝Vue鐨勭紪璇戣繃绋嬪氨鏄皢template杞寲涓簉enderfunction鐨勮繃绋嬨€傚畠浼氱粡鍘嗕互涓嬪嚑涓樁娈碉細鐢熸垚AST鏍戜紭鍖朿odegen棣栧厛瑙ｆ瀽妯℃澘锛岀敓鎴怉ST璇硶鏍戯紙涓€绉嶆弿杩版暣涓ā鏉跨殑JavaScript瀵硅薄褰㈠紡锛夈€備娇鐢ㄥぇ閲忔鍒欒〃杈惧紡瑙ｆ瀽妯℃澘锛岄亣鍒版爣绛惧拰鏂囨湰鏃讹紝浼氭墽琛岀浉搴旂殑閽╁瓙杩涜鐩稿叧澶勭悊銆俈ue鐨勬暟鎹槸鍝嶅簲寮忕殑锛屼絾骞朵笉鏄ā鏉夸腑鐨勬墍鏈夋暟鎹兘鏄搷搴斿紡鐨勩€傛湁浜涙暟鎹湪绗竴娆℃覆鏌撳悗涓嶄細鍙戠敓鍙樺寲锛屽搴旂殑DOM涔熶笉浼氬彂鐢熷彉鍖栥€傞偅涔堜紭鍖栬繃绋嬪氨鏄繁搴﹂亶鍘咥ST鏍戯紝鏍规嵁鐩稿叧鏉′欢鏍囪鏍戣妭鐐广€傛垜浠彲浠ヨ烦杩囪繖浜涙爣璁拌妭鐐癸紙闈欐€佽妭鐐癸級鐨勬瘮杈冿紝杩欏湪杩愯鏃舵瀬澶у湴浼樺寲浜嗘ā鏉裤€傜紪璇戠殑鏈€鍚庝竴姝ユ槸灏嗕紭鍖栧悗鐨凙ST鏍戣浆鎹负鍙墽琛屼唬鐮併€侻VVM鐨勪紭鐐瑰拰缂虹偣锛熶紭鐐癸細鍒嗙瑙嗗浘锛圴iew锛夊拰妯″瀷锛圡odel锛夛紝鍑忓皯浠ｇ爜鑰﹀悎锛屾彁楂樿鍥炬垨閫昏緫鐨勫鐢ㄦ€э細渚嬪锛岃鍥撅紙View锛夊彲浠ョ嫭绔嬩簬Model鏀瑰彉鍜屸€嬧€嬩慨鏀癸紝涓€涓猇iewModel鍙互缁戝畾鍒颁笉鍚岀殑鈥淰iews鈥?褰揤iew鏀瑰彉鏃讹紝Model涓嶈兘淇濇寔涓嶅彉锛岃€屽綋Model鏀瑰彉鏃讹紝View涔熷彲浠ヤ繚鎸佷笉鍙樸€傚彲浠ユ妸涓€浜涜鍥鹃€昏緫鏀惧湪涓€涓猇iewModel涓紝璁╁緢澶氳鍥鹃噸鐢ㄨ繖涓鍥鹃€昏緫锛屾彁楂樺彲娴嬭瘯鎬э細ViewModel鐨勫瓨鍦ㄥ彲浠ュ府鍔╁紑鍙戣€呭啓鍑烘洿濂界殑娴嬭瘯浠ｇ爜锛岃嚜鍔ㄦ洿鏂癲om锛氫娇鐢═wo-waybinding锛岃鍥捐嚜鍔ㄦ洿鏂版暟鎹洿鏂板悗锛屽皢寮€鍙戜汉鍛樹粠绻佺悙鐨勬墜鍔╠om涓В鏀惧嚭鏉ャ€傚彲鑳芥槸浣燰iew鐨勪唬鐮佹湁bug锛屼篃鍙兘鏄疢odel鐨勪唬鐮佹湁闂銆傛暟鎹粦瀹氬彲浠ヨ涓€涓湴鏂圭殑bug蹇€熻浆绉诲埌鍏朵粬鍦版柟锛岃鍘熸潵鐨勯棶棰樺畾浣嶅彉寰椾笉閭ｄ箞瀹规槗銆傚彟澶栵紝鏁版嵁缁戝畾鐨勫０鏄庢槸鐢ㄥ懡浠ゅ紡鐨勬柟寮忓啓鍦╒iew妯℃澘涓殑銆傝繖浜涘唴瀹逛笉鑳借鎵撴柇銆傚湪璋冭瘯澶фā鍧楃殑鏃跺€欙紝妯″瀷涔熶細寰堝ぇ锛岃櫧鐒剁敤璧锋潵寰堟柟渚匡紝涔熷緢鏂逛究銆傚緢瀹规槗淇濊瘉鏁版嵁鐨勪竴鑷存€с€傚埌鏃跺€欏鏋滈暱鏃堕棿鎸佹湁锛屼笉閲婃斁鍐呭瓨浼氭秷鑰楁洿澶氱殑鍐呭瓨銆傚浜庡ぇ鍨嬪浘褰㈠簲鐢紝瑙嗗浘鐘舵€佽緝澶氾紝ViewModel鐨勬瀯寤哄拰缁存姢鎴愭湰浼氭瘮杈冮珮銆傞珮鐨勩€俈ue鏁版嵁涓煇涓睘鎬х殑鍊煎彂鐢熷彉鍖栧悗锛岃鍥句細绔嬪嵆鍚屾閲嶆柊娓叉煋鍚楋紵閲嶆柊娓叉煋涓嶄細绔嬪嵆鍚屾鎵ц銆俈ue瀵瑰搷搴斿紡鐨勫疄鐜板苟涓嶆槸鍦ㄦ暟鎹彂鐢熷彉鍖栧悗绔嬪嵆鏀瑰彉DOM锛岃€屾槸鎸夌収涓€瀹氱殑绛栫暐鏇存柊DOM銆俈ue鍦ㄦ洿鏂癉OM鏃跺紓姝ユ墽琛屻€傚彧瑕佹娴嬪埌鏁版嵁鍙樺寲锛孷ue灏变細鎵撳紑涓€涓槦鍒楋紝缂撳啿鎵€鏈夊彂鐢熷湪鍚屼竴涓簨浠跺惊鐜腑鐨勬暟鎹彉鍖栥€傚鏋滃悓涓€涓瀵熻€呰澶氭瑙﹀彂锛屽畠鍙細琚帹鍏ラ槦鍒椾竴娆°€傝繖绉嶇紦鍐叉椂鐨勯噸澶嶆暟鎹垹闄ゅ浜庨伩鍏嶄笉蹇呰鐨勮绠楀拰DOM鎿嶄綔闈炲父閲嶈銆傜劧鍚庯紝鍦ㄤ笅涓€涓簨浠跺惊鐜妭鎷嶄腑锛孷ue鍒锋柊闃熷垪骞舵墽琛屽疄闄呯殑锛堝幓閲嶏級宸ヤ綔銆俤iff绠楁硶鏃堕棿澶嶆潅搴︼細涓€妫垫爲鐨勫畬鏁磀iff绠楁硶鏃堕棿澶嶆潅搴︿负O(n*3)锛孷ue浼樺寲涓篛(n)銆傜悊瑙ｏ細鏈€灏忔洿鏂帮紝key寰堥噸瑕併€傝繖鍙互鏄繖涓妭鐐圭殑鍞竴鏍囪瘑绗︼紝鍛婅瘔diff绠楁硶瀹冧滑鍦ㄥ彉鍖栧墠鍚庢槸鍚屼竴涓狣OM鑺傜偣銆備负浠€涔堟墿灞曞悕v-for鏈変竴涓敭锛熷鏋滄病鏈塳ey锛屽氨浼氳鏆村姏澶嶇敤銆傛瘮濡傚彧璇翠竴涓瘮濡傜Щ鍔ㄤ竴涓妭鐐规垨鑰呮坊鍔犱竴涓妭鐐癸紙ModifytheDOM锛夛紝娣诲姞涓€涓猭ey鍙細绉诲姩鍜屽噺灏戝DOM鐨勬搷浣溿€傚彧鏈夌浉鍚岀殑铏氭嫙鑺傜偣鎵嶄細杩涜绮剧粏姣旇緝锛屽惁鍒欙紝鏃х殑浼氳鏆村姏鍒犻櫎锛屾柊鐨勪細琚彃鍏ャ€傚彧杩涜鍚屽眰姣旇緝锛屼笉杩涜璺ㄥ眰姣旇緝銆俤iff绠楁硶鐨勪紭鍖栫瓥鐣ワ細鍥涚hitlookups锛屽洓绉嶆寚閽堝厛鏃у悗鏂帮紙寮€濮嬪悗鎻掑叆鍒犻櫎鑺傜偣鐨勬儏鍐碉級鍜屾棫鍚庢柊鍚庯紙鎻掑叆鎴栧垹闄よ妭鐐圭殑鎯呭喌锛塨eforeend)oldfrontandnewback(headandtailratio,杩欎釜鍙戠敓浜?娑夊強绉诲姩鑺傜偣,鐒跺悗鏂癴ront鎸囧悜鐨勮妭鐐?绉诲姩鍒皁ldback涔嬪悗)oldbackandnewfront(tailandheadratio)锛岃繖浠朵簨鍙戠敓浜嗭紝娑夊強鍒癕ovethenode锛岄偅涔坣ewfront鎸囧悜鐨刵ode浼氳绉诲姩鍒皁ldfront)---濡傛灉涓婇潰鐨勯棶棰橀兘娓呮浜嗭紝閭ｅ熀鏈氨O浜?--浣犺偗瀹氭病闂浠ヤ笅鏄畝鍗曠殑姒傚康馃槈Vue杞婚噺绾ф鏋剁殑浼樼偣锛氬彧鍏虫敞瑙嗗浘灞傦紝鏄竴缁勮鍥炬潵鏋勫缓鏁版嵁锛屽ぇ灏忓彧鏈夊嚑鍗乲b锛涙槗瀛︼細涓枃寮€鍙戯紝涓枃鏂囨。锛屾棤璇█闅滅锛屾槗鎳傛槗瀛︼紱鍙屽悜鏁版嵁缁戝畾Fixed锛氫繚鐣欎簡angular鐨勭壒鐐癸紝鍦ㄦ暟鎹搷浣滀笂鏇寸畝鍗曪紱缁勪欢鍖栵細淇濈暀浜唕eact鐨勪紭鐐癸紝瀹炵幇浜唄tml鐨勫皝瑁呭拰澶嶇敤锛屽湪鏋勫缓鍗曢〉搴旂敤鏂归潰鍏锋湁鐙壒鐨勪紭鍔匡紱瑙嗗浘銆佹暟鎹€佺粨鏋勫垎绂伙細璁╂暟鎹洿鏀规洿绠€鍗曪紝涓嶉渶瑕佷慨鏀归€昏緫浠ｇ爜锛屽彧闇€瑕佹搷浣滄暟鎹嵆鍙畬鎴愮浉鍏虫搷浣滐紱virtualDOM锛歞om鎿嶄綔闈炲父鑰楁€ц兘锛屼笉鍐嶄娇鐢ㄥ師鐢熺殑dom鎿嶄綔鑺傜偣锛屾瀬澶х殑瑙ｆ斁浜哾om鎿嶄綔锛屼絾鍏蜂綋鎿嶄綔杩樻槸dom锛屽彧鏄崲浜嗕竴绉嶆柟寮忥紱杩愯閫熷害鏇村揩锛氫笌react鐩告瘮锛屽畠涔熸槸鎿嶄綔virtualdom锛屽湪鎬ц兘鏂归潰锛寁ue鏈夊緢澶х殑浼樺娍銆倂ue-router璺敱閽╁瓙鍑芥暟鏄粈涔堬紵鎵ц椤哄簭鏄粈涔堬紵璺敱閽╁瓙鐨勬墽琛岃繃绋嬨€傞挬瀛愬嚱鏁扮殑绫诲瀷鏈夛細鍏ㄥ眬瀹堝崼銆佽矾鐢卞畧鍗€佺粍浠跺畧鍗€傚畬鎴愬鑸垎鏋愯繃绋嬶細瀵艰埅琚Е鍙戙€傚湪鍋滅敤鐨勭粍浠朵腑璋冪敤beforeRouteLeave瀹堝崼銆傝皟鐢ㄥ叏灞€beforeEach瀹堝崼銆傚湪鍙噸鐢ㄧ粍浠朵腑璋冪敤beforeRouteUpdate瀹堝崼(2.2+)銆傚湪璺敱閰嶇疆涓皟鐢╞eforeEnter銆傝В鏋愬紓姝ヨ矾鐢辩粍浠躲€傚湪婵€娲荤殑缁勪欢涓皟鐢╞eforeRouteEnter銆傝皟鐢ㄥ叏灞€beforeResolve瀹堝崼(2.5+)銆傚鑸凡纭銆傝皟鐢ㄥ叏灞€afterEach鎸傞挬銆傝Е鍙慏OM鏇存柊銆傚湪beforeRouteEnter瀹堝崼涓皟鐢ㄤ紶閫掔粰next鐨勫洖璋冨嚱鏁帮紝鍒涘缓鐨勭粍浠跺疄渚嬩細浣滀负鍥炶皟鍑芥暟鐨勫弬鏁颁紶鍏ャ€傜畝鑰岃█涔嬶紝灏辨槸鍏堝皢Vue.js鐨勬ā鏉跨紪璇戣浆鍖栦负AST鏍戯紝鐒跺悗娓叉煋鍑芥暟杩斿洖VNode锛圴ue鐨勮櫄鎷烡OM鑺傜偣锛夈€傝缁嗘楠ゅ涓嬶細棣栧厛锛岄€氳繃compile缂栬瘧鍣ㄥ皢妯℃澘缂栬瘧鎴怉ST璇硶鏍戯紙鎶借薄璇硶鏍戞槸婧愪唬鐮佹娊璞¤娉曠粨鏋勭殑鏍戣〃绀猴級锛宑ompile鏄痗reateCompiler鐨勮繑鍥炲€硷紝createCompiler鐢ㄤ簬鍒涘缓缂栬瘧鍣ㄣ€傛澶栵紝compile杩樿礋璐ｅ悎骞堕€夐」銆傜劧鍚庯紝AST浼氶€氳繃generate锛堝皢AST璇硶鏍戣浆鍖栦负render鍑芥暟瀛楃涓茬殑杩囩▼锛夊緱鍒皉ender鍑芥暟銆俽ender鐨勮繑鍥炲€兼槸VNode锛屼篃灏辨槸Vue鐨勮櫄鎷烡OM鑺傜偣锛岄噷闈㈠寘鍚紙鏍囩鍚嶏紝瀛愯妭鐐癸紝鏂囨湰绛塭tc锛?nextTick鏄粈涔堬紵Vue瀵瑰搷搴斿紡鐨勫疄鐜颁笉浼氬湪鏁版嵁鍙戠敓鍚庣珛鍗虫洿鏂癉OM銆備娇鐢╲m.$nextTick鏄湪涓嬩竴涓狣OM鏇存柊鍛ㄦ湡缁撴潫鍚庣珛鍗虫墽琛屽欢杩熷洖璋冦€備慨鏀规暟鎹悗浣跨敤锛屽彲浠ュ湪鍥炶皟涓幏鍙栨洿鏂板悗鐨凞OM銆傚啀璇磋Vue鐨勭敓鍛藉懆鏈熴€備粈涔堟椂鍊欒皟鐢紵beforeCreate锛氬疄渚嬪垵濮嬪寲鍚庯紝鏁版嵁瑙傚療鍓嶈皟鐢ㄣ€俢reated锛氬垱寤哄疄渚嬪悗璋冪敤銆傚疄渚嬪畬鎴愶細鏁版嵁瑙傚療锛屽睘鎬у拰鏂规硶鐨勬搷浣滐紝watch/event浜嬩欢鍥炶皟銆侼one$el.beforeMount锛氭寕杞藉墠璋冪敤锛岀涓€娆℃寕杞芥椂璋冪敤鐩稿叧render鍑芥暟锛氭浛鎹负鏂板垱寤虹殑vm.$el锛屾寕杞藉埌瀹炰緥涓婂悗璋冪敤hook銆俠eforeUpdate锛氬湪鏁版嵁鏇存柊鍓嶈皟鐢紝鍙戠敓鍦ㄨ櫄鎷烡OM閲嶆柊娓叉煋鎵撹ˉ涓佹椂锛屼箣鍚庝細璋冪敤changehook銆倁pdated锛氳櫄鎷烡OM鐢变簬鏁版嵁鍙樺寲鑰岃閲嶆柊娓叉煋鍜屾墦琛ヤ竵锛屼箣鍚庝細璋冪敤changehook銆俠eforeDestroy锛氬湪瀹炰緥閿€姣佷箣鍓嶈皟鐢紝瀹炰緥浠嶇劧鍙敤銆俤estroyed锛氬疄渚嬮攢姣佸悗璋冪敤銆傝皟鐢ㄥ悗锛孷ue瀹炰緥鎸囩ず鐨勬墍鏈夊唴瀹归兘灏嗚瑙ｉ櫎缁戝畾锛屾墍鏈変簨浠剁洃鍚櫒鍜屾墍鏈夊瓙瀹炰緥閮藉皢琚Щ闄ゃ€傛瘡涓敓鍛藉懆鏈熷唴鍙互鍋氫粈涔堬紵created锛氬疄渚嬪凡缁忓垱寤猴紝鍥犱负鏄渶鏃╄Е鍙戠殑锛屾墍浠ュ彲浠ヨ繘琛屼竴浜涙暟鎹拰璧勬簮鐨勮姹傘€俶ounted锛氬疄渚嬪凡缁忔寕杞斤紝鍙互杩涜涓€浜汥OM鎿嶄綔銆俠eforeUpdate锛氫綘鍙互鍦ㄨ繖涓挬瀛愪腑杩涗竴姝ユ敼鍙樼姸鎬佽€屼笉瑙﹀彂閲嶆柊娓叉煋銆倁pdated锛氬彲浠ユ墽琛屼緷璧栦簬DOM鐨勬搷浣滐紝浣嗚閬垮厤鏀瑰彉鐘舵€侊紝杩欏彲鑳戒細瀵艰嚧鏇存柊鐨勬棤闄愬惊鐜€俤estroyed锛氬彲浠ヨ繘琛屼竴浜涗紭鍖栨搷浣滐紝娓呴櫎瀹氭椂鍣紝瑙ｉ櫎缁戝畾浜嬩欢銆俛jax鏀惧湪鍝釜鐢熷懡鍛ㄦ湡锛燂細涓€鑸斁鍦╩ounted涓繚璇侀€昏緫缁熶竴锛屽洜涓虹敓鍛藉懆鏈熸槸鍚屾鎵ц鐨勶紝ajax鏄紓姝ユ墽琛岀殑銆傚崟涓€鏈嶅姟绔覆鏌搒sr涔熸斁鍦╟reated閲岄潰锛屽洜涓烘湇鍔＄娓叉煋涓嶆敮鎸乵ounted鏂规硶銆備粈涔堟椂鍊欎娇鐢╞eforeDestroy锛?褰撳墠椤甸潰浣跨敤浜?on锛岄渶瑕佽В缁戜簨浠躲€傛竻闄ゅ畾鏃跺櫒銆傚彇娑堢粦瀹氫簨浠讹紝婊氬姩mousemove銆俈ue濡備綍浣跨敤vm.$set()瑙ｅ喅瀵硅薄鐨刵ew灞炴€ф棤娉曞搷搴旂殑闂锛熺敱浜庣幇浠avaScript鐨勯檺鍒讹紝Vue鏃犳硶妫€娴嬪埌瀵硅薄灞炴€х殑娣诲姞鎴栧垹闄ゃ€傜敱浜嶸ue鍦ㄥ垵濮嬪寲瀹炰緥鏃朵細瀵瑰睘鎬ц繘琛実etter/setter杞崲锛屾墍浠ュ睘鎬у繀椤诲瓨鍦ㄤ簬鏁版嵁瀵硅薄涓婏紝Vue鎵嶈兘灏嗗叾杞崲涓哄搷搴斿紡銆備絾鏄疺ue鎻愪緵浜哣ue.set(object,propertyName,value)/vm.$set(object,propertyName,value)缁欏璞℃坊鍔犲搷搴斿紡灞炴€с€傛鏋舵湰韬槸濡備綍瀹炵幇鐨勶紵鎴戜滑鏌ョ湅瀵瑰簲鐨刅ue婧愮爜锛歷ue/src/core/instance/index.jsexportfunctionset(target:Array|Object,key:any,val:any):any{//target鏄竴涓暟缁刬f(Array.isArray(target)&&isValidArrayIndex(key)){//淇敼鏁扮粍鐨勯暱搴︼紝閬垮厤绱㈠紩>鏁扮粍闀垮害瀵艰嚧splcie()鎵ц閿欒target.length=Math.max(target.length,key)//浣跨敤鏁扮粍鐨勬嫾鎺utation鏂规硶瑙﹀彂鍝嶅簲target.splice(key,1,val)returnval}//key宸茬粡瀛樺湪锛岀洿鎺ヤ慨鏀瑰睘鎬у€糹f(keyintarget&&!(keyinObject.prototype)){target[key]=valreturnval}constob=(target:any).__ob__//target鏈韩涓嶆槸鍝嶅簲寮忔暟鎹紝鐩存帴璧嬪€糹f(!ob){target[key]=valreturnval}//灞炴€х殑鍝嶅簲寮忓鐞哾efineReactive(ob.value,key,val)ob.dep.notify()returnval}浠庝笂闈㈢殑婧愮爜鎴戜滑鍙互鐪嬪嚭vm.$set鐨勫疄鐜板師鐞嗘槸锛氬鏋渢arget鏄竴涓暟缁勶紝鐩存帴浣跨敤鏁扮粍鐨勬嫾鎺ユ柟寮忚Е鍙戠浉搴旂殑鍏紡锛涘鏋渢arget鏄璞＄殑璇濓紝浼氬厛鍒ゆ柇灞炴€ф槸鍚﹀瓨鍦紝瀵硅薄鏄惁鏈夊搷搴斻€傛渶鍚庯紝濡傛灉瑕佸灞炴€ц繘琛屽搷搴斿紡澶勭悊锛岄渶瑕佽皟鐢╠efineReactive鏂规硶杩涜鍝嶅簲寮忓鐞嗭紙defineReactive鏂规硶鏄疺ueObject.defineProperty璋冪敤鐨勬柟娉曪紝鍦ㄥ璞″垵濮嬪寲鐨勬椂鍊欏姩鎬佺殑缁欏璞″睘鎬ф坊鍔爂etters鍜宻etters锛?/p>
