1銆佹暟鎹搷搴斿師鐞?.1銆佷粈涔堟槸MVVM锛熺畝鍗曟潵璇村氨鏄綋鏁版嵁鍙戠敓鍙樺寲鏃讹紝瑙嗗浘涔熶細鍙戠敓鍙樺寲銆傞鍏堬紝鎮ㄥ繀椤讳娇鐢▄{}}瀹氫箟妯℃澘妯″瀷銆傚綋鏁版嵁涓殑鍊煎彂鐢熷彉鍖栨椂锛岃鍥綱iew涔熶細闅忎箣鍙樺寲锛涜鍥炬ā鍨媀iew-model鏄ā鏉縈odel鍜岃鍥綱iew涔嬮棿鐨勬ˉ姊侊紝Vue鏄潪渚靛叆寮忕殑锛孯eact鍜屽皬绋嬪簭鏄镜鍏ュ紡鐨勶紙鏁版嵁鍙樺寲鏃堕渶瑕佽皟鐢ㄦ彁鍓嶅啓濂界殑API锛?/Vue鏁版嵁鍙樺寲,闈炰镜鍏ュ紡this.a++//React,灏忕▼搴忔暟鎹彉鍖?渚靛叆寮弔his.setState({a:this.state.a+1});1.2銆佹暟鎹搷搴斿紡鐨勪腑蹇冩€濇兂锛熼€氳繃閲嶅啓鏁版嵁鐨刧et鍜宻et灞炴€ф柟娉曪紝鍦ㄦ覆鏌撴暟鎹椂锛屽皢鑷繁浣跨敤鐨勬墍鏈夎闃呰€呭瓨鍌ㄥ湪鑷繁鐨勮闃呰€呭垪琛ㄤ腑锛涘綋鏁版嵁鍙戠敓鍙樺寲鏃讹紝璇ユ柟娉曢€氱煡鎵€鏈夎闃呭畠鐨勮闃呰€咃紝杈惧埌閲嶆柊娓叉煋鐨勭洰鐨勩€備綘鏈夌偣鍥版儜鍚楋紵娌″叧绯伙紝涓句釜绠€鍗曠殑鏍楀瓙馃尠锛氥€婅タ娓歌銆嬮噷鐨勬€墿锛堝畧鏈涜€咃級鏃跺埢鎯崇潃锛堣闃咃級鍞愬儳锛堟暟鎹級锛屾兂鍚冨攼鍍х殑鑲夈€傚瓩鎮熺┖锛圕omponent锛夊湪鍚埌锛坓etcollectiondependency锛夊攼鍍ц鎶撶殑娑堟伅鍚庯紝鍙嶅簲锛坰ettriggersdependency锛夊噯澶囪惀鏁戝笀鐖躲€備簬鏄垜鏉ュ埌浜嗘€墿锛堝畧鏈涜€咃級鐨勫发绌达紝鍦ㄥ拰瀹冩縺鎴樹簡鍑犺疆涔嬪悗锛屾垚鍔熸晳鍑轰簡鍞愬儳锛圖ata锛夛紝杈惧埌浜嗗啀娆¤笍涓婏紙娓叉煋锛塚ittualDOMTree鐨勭洰鐨勶紒2.鍙嬭揪鍙戠幇涓€涓€滅閽ュ寵馃攽鈥漁bject.defineProperty()鏂规硶锛氭暟鎹姭鎸侊紝鏁版嵁浠ｇ悊锛孧DN鏄繖鏍锋弿杩扮殑锛氱洿鎺ュ湪涓€涓璞′笂瀹氫箟涓€涓柊鐨勫睘鎬э紝鎴栬€呬慨鏀逛竴涓璞″凡鏈夌殑灞炴€э紝骞惰繑鍥瀟his鐩殑銆侽bject.defineProperty(obj(definethatobject),'a(definewhatpropertyofthisobject)',{//灞炴€у€煎畾涔変负澶氬皯value:3})//-------------------------------馃尠鏍楀瓙馃尠---------------------------------------varobj={};Object.defineProperty(obj,'a',{get(){console.log('璁块棶obj鐨勪竴涓睘鎬?');return7;},set(){console.log('鏀瑰彉obj鐨勪竴涓睘鎬?,newValue);temp=newValue;}})console.log(obj.a);//7obj.a=9;//淇敼a鐨勫€糲onsole.log(obj.a);//73.寮ヨˉ杩欎釜key鐨勪笉瓒仇煍慸efineReactive鍑芥暟锛氫负浜嗚В鍐砫efineProperty()鏂规硶鐨勯棶棰橈紝get涓嶈兘杩斿洖set鍒氬垰淇敼鐨勫€硷紝鍐嶆璋冪敤浼氭樉绀轰慨鏀瑰墠鐨勫€硷紝濡備綍瑙ｅ喅杩欎釜闂锛熷湪澶栭潰瀹氫箟涓€涓叏灞€鍙橀噺鏉ヤ紶閫掑彉閲忓€笺€?/瑙ｅ喅defineProperty鐨勯棶棰榙efineProperty(data(dataobject),key(keyname),val(value)){}//-----------------------------------馃尠鏍楀瓙馃尠-------------------------------------------varobj={};vartemp;//鍦ㄥ闈㈠畾涔変竴涓叏灞€鍙橀噺鏉ヤ紶閫掑彉閲忓€笺€俧unctiondefineProperty(data,key,val){Object.defineProperty(data,key,{//enumerableenumerable:true,//鍙互閰嶇疆锛屾瘮濡傚垹闄onfigurable:true,get(){console.log('accessobj'+key+'attribute!');returntemp;},set(){console.log('Changeobj'+key+'attribute!',newValue);if(val==newValue){return;}temp=newValue;}});}defineReactive(obj,'a',10)console.log(obj.a);//璁块棶obj鐨刟灞炴€э紒10obj.a=69;//淇敼a鐨勫€紀bj.a++;console.log(obj.a);//淇敼obj鐨刟灞炴€э紒70//defineReactive瀹炵幇//绠€鍖栫増functiondefineReactive(target,key,value,enumerable){//濡ュ崗鍚庯紝杩欐槸Vue瀹炰緥letthat=this;//鍑芥暟鍐呴儴鏄竴涓眬閮ㄤ綔鐢ㄥ煙锛岃繖涓€兼槸涓€涓彧鍦ㄥ嚱鏁颁腑浣跨敤鐨勫彉閲忥紙闂寘锛塱f(typeofvalue==='object'&&value!=null&&!Array.isArray(value)){//鏄竴涓潪鏁扮粍寮曠敤绫诲瀷reactify(value);//閫掑綊鍦皚Object.defineProperty(target,key,{configurable:true,enumerable:!!enumerable,get(){console.log(`read${key}property`);//棰濆鐨勮繑鍥炲€硷紱},set(newVal){console.log(`Setthe${key}propertyto:${newVal}`);//Extravalue=reactify(newVal);}});}4.鏁扮粍鐨勫搷搴斿紡澶勭悊閲嶅啓浜?涓睘鎬э紝push(鏁扮粍鍘嬪熬)銆乸op(鍙栧嚭鏁扮粍灏?銆乻hift(鎻掑叆鏁扮粍澶?銆乽nshift(鍙栧嚭鏁扮粍灏?銆佹嫾鎺ワ紙鍓垏锛夈€佹帓搴忥紙灏卞湴鎺掑簭锛夈€佸弽杞紙鍙嶈浆鎺掑簭浣嶇疆锛夛紱//getArray.prototypeconstarrayPrototype=Array.prototype//浠rray.prototype涓哄師鍨嬪垱寤篴rrayMethods瀵硅薄骞跺畾涔塤_proto鏂规硶constarrayMethods=Object.create(arrayPrototype);//7涓緟閲嶅啓鐨勬暟缁勬柟娉昪onstmethodsNeedChange=['push','pop','shift','unshift','splice','sort','reverse'];//閬嶅巻methdsNeedChange.forEach(methodName=>{//澶囦唤鍘熸柟娉昪onstoriginal=arrayPrototype[methodName];//浠庢暟缁勪腑鍙栧嚭__obj__,constob=this.__obj__;//push/unshift/splice涓夌鏂规硶鍙互鎻掑叆鏂伴」锛屽苟灏嗘彃鍏ョ殑鏂伴」鍙樹负observeletinserted=[];寮€鍏筹紙鏂规硶鍚嶏級{case'push':case'unshift':inserted=arguments;浼戞伅;case'splice'://鎷兼帴鏍煎紡涓簊plice(涓嬫爣,鏁伴噺,鎻掑叆鏂伴」)inserted=arguments.slice(2);鎷彿;}//鍒ゆ柇鏄惁鏈夋柊鐨刬tem瑕佹彃鍏ワ紝骞惰鏂扮殑item鎴愪负responseif(inserted){ob.obsetveArray(inserted);}//瀹氫箟涓€涓柊鏂规硶def(arrayMethods,methodName,function(){original.apply(this,arguments);},false);});闈㈣瘯棰橈細鏁扮粍涓殑response鏄浣曞疄鐜扮殑锛熺瓟锛氫互Array.prototype涓哄師鍨嬶紝鍒涘缓涓€涓猘rrayMethods鐨勫璞★紝浣跨敤涓€涓緢寮虹殑鏂规硶锛孫bject.setPrototypeOf()璁╂暟缁勭殑_proto鎸囧悜arrayMethods锛岃繖鏍峰氨鍙互璋冪敤鏂伴噸鍐欑殑7涓柟娉?锛屼粈涔堟槸渚濊禆锛熼渶瑕佺敤鍒版暟鎹殑閫掑綊灏辨槸渚濊禆锛屼緷璧栧湪getter涓敹闆嗭紝渚濊禆鍦╯etter涓Е鍙戙€傚皢鏀堕泦渚濊禆鐨勪唬鐮佸皝瑁呮垚涓€涓狣ep绫伙紝姣忎釜Observer瀹炰緥閮芥湁涓€涓狣ep瀹炰緥锛沇atcher鏄竴涓腑浠嬶紝褰撴暟鎹彂鐢熷彉鍖栨椂锛岄€氳繃watcher涓浆閫氱煡缁勪欢銆傚啀鎷裤€婅タ娓歌銆嬶紝鎬墿锛圵atcher锛夋槸鎬庝箞鐭ラ亾鍞愬儳锛圖ata锛夎矾杩囪繖閲岀殑锛熻娲惧幓宸″北鐨勫绮撅紙Dep-subscriber锛夎嚜鐒跺彂鐜帮紙鏀堕泦锛夛紙depend鏂规硶锛夛紱杩欎釜濡栫簿锛圖ep锛夊贰灞辩殑鐩殑锛堝睘鎬э級鏈?涓細target锛堢洰鏍囷級锛宨d锛宻ubs锛堟墍鏈夊贰灞变俊鎭級锛屽綋鍞愬儳锛圖ata锛夌粡杩囦竴涓簨鍏堝竷缃ソ鐨勯櫡闃憋紙鐢熷懡鍛ㄦ湡鐨勯挬瀛愶級)锛屼粬浼氳鎶撲綇锛屾帹鍏ュ发绌?targetStacktop)锛屼氦缁欐€墿(Watcher)銆?.Wather浠€涔堟椂鍊欏彲浠ユ斁鍏ep锛烡ep绫伙細灏佽鏀堕泦鍒扮殑浠ｇ爜锛岀鐞嗕緷璧栥€傚ぉ姘旂被锛氣憼鏇存柊灞炴€у€硷紱鈶″湪watch涓墽琛屽洖璋冨嚱鏁癶andler(newVal,oldVal)鍏堝皢Wather璁剧疆鍒板叏灞€鎸囧畾浣嶇疆锛岀劧鍚庤鍙栨暟鎹紱鍦╣etter鍑芥暟涓紝瀹冧細浠庝笘鐣屼笂鍞竴鐨勫湴鏂硅鍙栧綋鍓嶅€艰鍙栨暟鎹殑wather锛屽苟灏唚ather閲嶆柊鏀堕泦鍒癉ep涓€?/wather.jsexportdefaultclassDep{constructor(){//浣跨敤鏁扮粍瀛樻斁鑷繁鐨勮闃呰€咃紝subs琛ㄧず璁㈤槄璁㈤槄鑰呫€?/璇ユ暟缁勫寘鍚玾ather鐨勫疄渚嬨€傝繖涓?subs=[];}//娣诲姞璁㈤槄addSub(sub){this.shbs.push(sub);}//娣诲姞渚濊禆dpend(){//鎸囧畾鍏ㄥ眬浣嶇疆if(Dep.target){//濡傛灉Dep.target琚繚瀛橈紝灏嗗叾鎺ㄥ叆substhis.addSub(Dep.target);//}}//Notifyupdatenotify(){//娴呭厠闅嗕竴浠絵}7.Vue涓浣曡瘑鍒玜.b.c锛熶娇鐢ㄩ珮闃跺嚱鏁伴€愬眰鎻愬彇閲岄潰鐨勫€笺€?script>//淇勭綏鏂濞僾aro={a:{b:{c:{d:68}}}}varstr='a.b.c.d';functionparsePath(str){//鏍规嵁鎷嗗垎銆倂arsegments=str.split('.');//杩斿洖鎺ユ敹瀵硅薄鐨勫嚱鏁皉eturn(obj)=>{//閬嶅巻鎺ユ敹鍑芥暟for(leti=0;i
