鏉ヤ笉鍙婅瑙ｄ簡锛屼笂杞﹀惂...涓婁竴绡噕ue2.x鍝嶅簲寮忓師鐞嗕富瑕佹槸瀵硅薄鐨勫搷搴斿紡锛屼粖澶╄ˉ鍏呬竴涓嬫暟缁勭殑鍝嶅簲寮忓師鐞嗭紝鍥犱负Vue瀵规暟缁勫仛浜嗙壒娈婂鐞嗐€備负浠€涔坴ue涓嶄娇鐢∣bject.defineProperty鏉ュ儚澶勭悊瀵硅薄涓€鏍峰鐞嗘暟缁勫憿锛烵bject.defineProperty鏄笉鏄笉鑳界洃鍚暟缁勶紵杩樻槸鍑轰簬鍏朵粬鑰冭檻锛熼偅涔堝畠鏄浣曞疄鐜板鏁扮粍鐨勭洃鎺у憿锛熷甫鐫€杩欎簺闂锛屾垜浠潵鎺㈠涓€涓嬧€︹€bject.defineProperty鏄惁鏀寔鏁扮粍锛熼鍏堬紝鎴戜滑鏉ユ祴璇曚竴涓婳bject.defineProperty鏄惁鏀寔鏁扮粍銆俧unctiondefineReactive(obj,key,val){Object.defineProperty(obj,key,{enumerable:true,//灞炴€ф槸鍙灇涓剧殑configurable:true,get(){console.log('馃惎-----read',val)returnval;},set(newVal){if(val===newVal)returnval=newValconsole.log('馃惎-----change---',val,obj)}})}鎴栬€呰繖涓猟efineReactive鍑芥暟锛屾垜浠敤瀹冩潵閬嶅巻鏁扮粍锛屼互鏁扮粍鐨勭储寮曚负key锛岀敤getter/setter鏍囪姣忎竴椤广€俵etarray=[1,2,3,4,5]array.forEach((c,index)=>{defineReactive(array,index,c)})鎴戜滑鍦ㄦ帶鍒跺彴鎵撳嵃涓€涓嬶紝鍙互鐪嬪埌鎵撳嵃缁撴灉锛岃繖鎰忓懗鐫€鏁扮粍椤规爣鏈塯etters/setters銆傚洖鍒拌繖涓棶棰橈紝Object.defineProperty鍙互鐩戝惉鏁扮粍锛岃€屼笖鏀寔鏁扮粍銆備负浠€涔坴ue涓嶆彁渚涘鏁扮粍灞炴€х殑鐩戞帶锛熺浜屼釜璇濋鏉ヤ簡銆傛棦鐒禣bject.defineProperty鏈夎繖涓兘鍔涳紝涓轰粈涔坴ue涓嶇敤瀹冩潵鐩戞帶鏁扮粍灞炴€у憿锛熸湁浜烘彁鍒颁簡length灞炴€э紝length灞炴€х殑鍙樺寲鍙兘浼氬鑷翠竴浜涚┖鍏冪礌锛岀‘瀹烇紝Object.defineProperty鏃犳硶澶勭悊杩欎簺绌烘暟缁勩€備絾鏄鎴戜滑浠庡彟涓€涓搴﹁€冭檻涓€涓嬨€備笉灏辩浉褰撲簬閫氳繃鏀瑰彉length灞炴€ф潵澧炲姞鏁扮粍鐨勯暱搴︽潵澧炲姞灞炴€у悧锛熻繖涔熸槸Vue鍦ㄥ璞′腑妫€娴嬩笉鍒扮殑銆備笂鍥剧浜屾潯鏃ュ織锛屽綋缁欐暟缁勪腑鐨勬煇涓€椤硅祴鍊兼椂锛岃Е鍙憇etter锛屾墦鍗皊etter鏃讹紝鎵撳嵃obj鏁扮粍锛屼緷娆¤鍙栨暟缁勭殑鍊硷紝杩欎細褰卞搷鎬ц兘銆傚彟澶栵紝寰堝鏃跺€欙紝鎴戜滑骞朵笉鑳界‘瀹氭暟缁勭殑闀垮害锛屼笉鑳芥彁鍓嶆坊鍔爂etter/setter锛屽鏋滄暟缁勭殑闀垮害寰堝ぇ锛屼細閫犳垚鎬ц兘闂銆傜敤娓歌揪鐨勫師璇濊锛屾€ц兘鎴愭湰涓庤幏寰楃殑鐢ㄦ埛浣撻獙鏀剁泭骞朵笉鎴愭姣斻€傚湪github涓婂彂甯僘ouda鐨勭瓟妗堛€傚彟澶栦綍澹悰鐨勮€佸洖绛斾篃寰堢簿杈燄煓堬細濡傛灉鐭ラ亾鏁扮粍鐨勯暱搴︼紝鐞嗚涓婂彲浠ユ彁鍓嶇粰鎵€鏈夌殑绱㈠紩璁剧疆getter/setter銆備絾鏄鍏堬紝鍦ㄥ緢澶氭儏鍐典笅浣犲苟涓嶇煡閬撴暟缁勭殑闀垮害銆傜浜岋紝濡傛灉鏄ぇ鏁扮粍锛屾彁鍓嶅姞涓奼etter/setter锛屾€ц兘璐熸媴浼氬緢閲嶃€傛€昏€岃█涔嬶紝鐞嗚涓妚ue鏄彲浠ュ仛鍒拌繖涓€鐐圭殑锛屼絾鏄嚭浜庢€ц兘鐨勮€冭檻骞舵病鏈夊仛鍒般€傜浉鍙嶏紝瀹冧娇鐢ㄦ暟缁勭獊鍙樻柟娉曟潵瑙﹀彂瑙嗗浘鏇存柊銆俈ue濡備綍瀹炵幇瀵规暟缁勭殑鐩戝惉瑙ｅ喅浜嗕互涓婁袱涓棶棰樸€傛帴涓嬫潵鎴戜滑鐪嬬湅Vue鐨勬暟缁勫彉寮傛槸濡備綍瀹炵幇鐨勩€俢onstarrayKeys=Object.getOwnPropertyNames(arrayMethods)if(Array.isArray(value)){constaugment=hasProto?protoAugment:copyAugmentaugment(value,arrayMethods,arrayKeys)this.observeArray(value)}else{this.walk(value)}observeArray浼氬皢鏁扮粍涓殑瀵硅薄鏁版嵁鍙樻垚鍙娴嬬殑鍝嶅簲鏁版嵁銆俹bserveArray鍜寃alk鍑芥暟涓昏鏄垜浠笂涓€绡囨枃绔爒ue2.x鐨勫搷搴斿紡鍘熺悊鐨勫唴瀹广€俈ue杩欓噷瀵规暟缁勬湁鐗规畩澶勭悊锛屼緷璧杙rotoAugment鍜宑opyAugment杩欎袱涓嚱鏁般€俥xportconsthasProto='__proto__'in{}棣栧厛鍒ゆ柇娴忚鍣ㄦ槸鍚︽敮鎸乸roto灞炴€э紝閫氳繃hasProto鏉ュ喅瀹氭槸鎵цprotoAugment杩樻槸copyAugment銆傚湪鐪嬭繖涓や釜鍑芥暟涔嬪墠锛屾垜浠厛鐪嬩竴涓嬫暟缁勫彉寮傜殑鏍稿績鏂囦欢array.js銆傞『渚夸篃鍙互鐭ラ亾arrayMethods鍜宎rrayKeys杩欎袱涓弬鏁版槸浠€涔堛€?/array.jsimport{def}from'../util/index'constarrayProto=Array.prototypeexportconstarrayMethods=Object.create(arrayProto)/***鎷︽埅鍙樺紓鏂规硶骞跺彂鍑轰簨浠?/;['push','pop','shift','unshift','splice','sort','reverse'].forEach(function(method){//缂撳瓨鍘熷鏂规硶constoriginal=arrayProto[method]def(arrayMethods,method,functionmutator(...args){//璋冪敤鏁扮粍鐪熸鐨勬柟娉昪onstresult=original.apply(this,args)//__ob__琛ㄧず鏁版嵁鏄惁琚瀵熷埌constob=this.__ob__letinsertedswitch(method){case'push':case'unshift':inserted=argsbreakcase'splice':inserted=args.slice(2)break}//inserted琛ㄧず鏈夋暟鎹彃鍏ヨ瀵熸柊鏁版嵁if(inserted)ob.observeArray(inserted)//閫氱煡鍙樺寲ob.dep.notify()杩斿洖缁撴灉})})/***瀹氫箟涓€涓睘鎬с€?/exportfunctiondef(obj:Object,key:string,val:any,enumerable?:boolean){瀵硅薄銆傚畾涔塭Property(obj,key,{value:val,enumerable:!!enumerable,writable:true,configurable:true})}vue閫氳繃Object.create璁゛rrayMethods缁ф壙鏁扮粍鐨勫師鍨嬶紝Object.create鐨勬湰璐ㄦ槸鍘熷瀷缁ф壙銆愭墜鍔ㄦ挄涓婮S缁ф壙銆戯紝姝ゆ椂鏁扮粍鐨勫師鍨嬮摼鎺ュ埌arrayMethods鐨勫師鍨嬮摼涓娿€俤ef鍑芥暟涓昏鐢ㄤ簬瀹氫箟灞炴€с€傞亶鍘嗚繖涓冧釜鏂规硶锛岄€氳繃def鍑芥暟锛屾垜浠湪arrayMethods鍘熷瀷閾句笂閲嶅啓杩欎竷涓柟娉曪紝骞跺湪鍐呴儴璋冪敤鏁扮粍鍘熸湁鐨勬柟娉曪紝鏈€鍚庨€氳繃notify鏇存柊瑙嗗浘銆俰nserted琛ㄧず鎻掑叆鏂版暟鎹紝闇€瑕佸鏂版暟鎹繘琛宱bsserve銆傛帴涓嬫潵鎴戜滑鍥為【涓€涓媝rotoAugment鍜宑opyAugment杩欎袱涓嚱鏁般€?***閫氳繃鎷︽埅*浣跨敤__proto__鐨勫師鍨嬮摼鏉ユ墿鍏呯洰鏍囧璞℃垨鏁扮粍*/functionprotoAugment(target,src:Object,keys:any){/*eslint-disableno-proto*/target.__proto__=src/*eslint-enableno-proto*/}/***閫氳繃瀹氫箟闅愯棌灞炴€ф潵鎵╁厖鐩爣瀵硅薄鎴栨暟缁勩€?//*istanbul蹇界暐涓嬩竴涓?/functioncopyAugment(target:Object,src:Object,keys:Array
