涓婂懆浜旇窡鐫€瀛﹀闈㈣瘯浜嗕竴涓笁骞村伐浣滅粡楠岀殑鍓嶇寮€鍙戯紝鍦ㄤ竴鏃佸皬蹇冪考缈肩殑鐪嬬潃銆傛兂鐫€涔嬪墠琚埆浜洪潰璇曡繃锛岀幇鍦ㄥ張鍦ㄩ潰璇曞埆浜猴紝鎰熻蹇冩儏鍏跺疄鏄竴鏍风殑銆傚墠瑷€宸ヤ綔涓夊勾鐨刅ue鐢ㄦ埛搴旇鐭ラ亾浠€涔堬紵涓轰粈涔堝伐浣滃嚑骞寸殑鍩虹瓒婃潵瓒婅杽锛熷浣曞湪宸ヤ綔涓娊鍑烘椂闂村涔狅紵浜嬪疄涓婏紝鎴戜滑涓嶆槸瑕佷綘鎶婁竴涓潰璇曢棶棰樼殑鎵€鏈夌瓟妗堥兘鍐欎笅鏉ワ紝鑰屾槸瑕佸涔犲叾涓殑鎬濇兂銆傚氨鍍忎綘鎺ヨЕ鍒颁竴涓柊鐨剅eact棰嗗煙涓€鏍凤紝浣犱篃鍙互鎻愮偧鍑哄熀鏈€濇兂銆傞潰璇曢锛氿煈俈ue濡備綍鐩戞帶鏁版嵁锛熻繖鍏跺疄鏄竴涓€佺敓甯歌皥鐨勯棶棰橈紝浣嗗彧瑕佷綘鏈変竴鐐瑰熀纭€鐭ヨ瘑锛屽氨鑳藉洖绛斾竴涓や釜銆傚笀濮愬憡璇夋垜锛岄棶棰樹笉浠呬粎鏄棶棰樻湰韬紝鑰屾槸杩欎釜鐭ヨ瘑鍑烘潵鐨勭郴缁熴€傪煋?1瀵硅薄鏁版嵁濡備綍鐩戞帶鍦╲ue2.x鐗堟湰涓紝鏁版嵁鐩戞帶鏄娇鐢∣bject.definePropertyAPI瀹炵幇鐨勩€傛垜浠潵鐪嬩竴涓緥瀛愷煂皏artext='vue';constdata={};Object.defineProperty(data,'text',{get(){returntext;},set(newVal){text=newVal;}});data.text//'vue'data.text='react'//'react'褰撴垜浠闂垨璁剧疆瀵硅薄鐨勫睘鎬ф椂锛屼細瑙﹀彂鐩稿簲鐨勫嚱鏁帮紝鐒跺悗鍦ㄨ繖涓嚱鏁颁腑杩斿洖鎴栬缃睘鎬х殑鍊笺€傚綋鐒讹紝鎴戜滑鍙互鍦ㄨЕ鍙戝嚱鏁扮殑鏃跺€欏仛鎴戜滑鎯冲仛鐨勪簨鎯咃紝杩欏氨鏄€滃姭鎸佲€濇搷浣溿€傚湪Vue涓紝Object.defineProperty鐢ㄤ簬鍔寔瀵硅薄灞炴€х殑setter鍜実etter鎿嶄綔锛屽苟鍒涘缓涓€涓睛鍚櫒浠ュ湪鏁版嵁鍙戠敓鍙樺寲鏃惰繘琛岄€氱煡銆倂ardata={name:'hello',age:18}Object.keys(data).forEach(function(key){Object.defineProperty(data,key,{enumerable:true,//鏄惁鍙互鐢ㄤ簬for...鍦ㄥ惊鐜腑鎴栧湪Object.keys涓垪鍑哄畠浠€俢onfigurable:true,//false,涓嶈兘淇敼銆佸垹闄ょ洰鏍囧睘鎬ф垨淇敼浠ヤ笅灞炴€et:function(){console.log('getdata');},set:function(){console.log('鐩戝惉鏁版嵁鍙戠敓鍙樺寲');}})});data.name//鎺у埗鍙颁細鎵撳嵃鈥済etdata鈥漝ata.name='world'//鎺у埗鍙颁細鎵撳嵃鈥滄暟鎹凡缁忚鐩戝惉鈥?2鏁扮粍鏁版嵁鏄浣曠洃鍚殑鎴戜滑鐭ラ亾涓婇潰灏辨槸鐩戝惉鏁版嵁瀵硅薄鐨勬暟鎹紝鎴戜滑涓嶈兘鈥滃姭鎸佲€濇暟缁勭殑鏁版嵁銆傞偅涔圴ue鏄浣曞仛鍒扮殑鍛紵import{def}from'../util/index'constarrayProto=Array.prototypeexportconstarrayMethods=Object.create(arrayProto)constmethodsToPatch=['push','pop','shift','unshift','splice','sort','reverse']methodsToPatch.forEach(function(method){//缂撳瓨鍘熷鏂规硶constoriginal=arrayProto[method]def(arrayMethods,method,functionmutator(...args){constresult=original.apply(this,args)constob=this.__ob__letinsertedswitch(method){case'push':case'unshift':inserted=argsbreakcase'splice':inserted=args.slice(2)涓柇}if(inserted)ob.observeArray(inserted)//notifychangeob.dep.notify()returnresult})})鐪嬫潵Vue涔嬫墍浠ヨ兘鐩戝惉鍒版暟缁勶紝鏄洜涓洪噸鍐欎簡鏁扮粍鐨勬柟娉曘€傛€荤粨涓€涓嬶紝灏辨槸杩欎簺姝ラ锛?1棣栧厛鑾峰彇nativeArray鐨勫師鍨嬫柟娉曪紝鍥犱负鎷︽埅涔嬪悗锛岃繕鏄渶瑕乶ative鏂规硶鏉ュ府鎴戜滑瀹炵幇鏁扮粍鐨勫彉鍖栥€?2浣跨敤Object.defineProperty瀵笰rray鐨勫師鍨嬫柟娉曞仛涓€浜涙嫤鎴搷浣溿€?3灏嗛渶瑕佹埅鍙栫殑Array绫诲瀷鐨勬暟鎹師鍨嬫寚鍚戜慨鏀瑰悗鐨勫師鍨嬨€傚弬鑰冿細鍓嶇vue闈㈣瘯棰樿瑙ue涓轰粈涔堟娴嬩笉鍒版暟缁勫彉鍖栥€傝繖骞朵笉鎰忓懗鐫€JS涓嶈兘鏀寔鍝嶅簲寮忔暟缁勩€傚叾瀹濲S娌℃湁杩欎釜闄愬埗銆傛暟缁勫湪JS涓粡甯歌鐢ㄦ潵浣滀负鏍堛€侀槦鍒椼€侀泦鍚堢瓑鏁版嵁缁撴瀯鐨勫疄鐜帮紝浼氭湁鎵归噺鏁版嵁闇€瑕侀亶鍘嗐€傝繍琛屾椂浠ヤ笉鍚屾柟寮忎紭鍖栧璞″拰鏁扮粍銆傚洜姝わ紝鏁扮粍鐨勫鐞嗛渶瑕佷笓闂ㄥ寲浠ユ彁楂樻€ц兘銆俈ue閫氳繃涓烘瘡涓敭璁剧疆getters/setters鏉ュ疄鐜板搷搴斿紡銆傚紑鍙戜汉鍛樹娇鐢ㄦ暟缁勬槸涓轰簡閬嶅巻銆傝繖鏃跺€欒皟鐢╣etters鐨勫紑閿€澶ぇ浜嗭紝鎵€浠ue骞舵病鏈夊湪鏁扮粍鐨勬瘡涓猭ey涓婅缃畠浠紝鑰屾槸鍦ㄦ暟缁勪笂瀹氫箟浜哶_ob__锛屼互鍙婂彲浠ュ奖鍝嶅師鏁扮粍鐨勫師鍨嬫柟娉曪紝姣斿push锛岃鏇挎崲銆備负姝わ紝鏈変汉鍘籊itHub涓婅鏁欐父杈撅紝娓歌揪鐨勫洖绛斾篃璇存槸鍥犱负鎬ц兘闂娌℃湁浣跨敤杩欑鏂瑰紡鐩戞帶鏁扮粍銆俫ithub.com/vuejs/vue/i...婧愮爜浣嶇疆锛歴rc/core/observer/index.jsconstructor(value:any){this.value=valuethis.dep=newDep()this.vmCount=0def(value,'__ob__',this)if(Array.isArray(value)){if(hasProto){protoAugment(value,arrayMethods)}else{copyAugment(value,arrayMethods,arrayKeys)}this.observeArray(value)}else{杩欍€倃alk(value)}}/***閬嶅巻鎵€鏈夊睘鎬у苟灏嗗畠浠浆鎹负*getter/setter銆備粎褰?鍊肩被鍨嬩负Object鏃舵墠搴旇皟鐢ㄦ鏂规硶銆?/walk(obj:Object){constkeys=Object.keys(obj)for(leti=0;i
