鍓嶈█澶у閮界煡閬揤ue2涓殑鍝嶅簲寮忓叾瀹炴湁鐐瑰崐鎴愬搧銆傚畠涓嶈兘瀵瑰璞＄殑鏂板睘鎬у仛浠讳綍浜嬫儏銆傚浜庢暟缁勶紝闇€瑕佹嫤鎴畠鐨勫師鍨嬫柟娉曟潵瀹炵幇鍝嶅簲寮忋€備緥濡傦細letvm=newVue({data(){return{a:1}}})//鉂屽搸鍛€锛屾病鏈夊弽搴旓紒vm.b=2letvm=newVue({data(){return{a:1}},watch:{b(){console.log('change!!')}}})//鉂屽搸鍛€锛屾病鏈夊弽搴旓紒褰搗m.b=2鏃讹紝Vue鎻愪緵浜嗕竴涓猘pi锛歵his.$set锛岃鏂版坊鍔犵殑灞炴€т篃鏈夊搷搴斿紡鐨勬晥鏋溿€備絾鏄浜庡緢澶氭柊鎵嬫潵璇达紝寰€寰€闇€瑕佷粩缁嗗垽鏂粈涔堟椂鍊欎娇鐢?set锛屼粈涔堟椂鍊欑洿鎺ヨЕ鍙戝搷搴斻€傛€讳箣锛屽湪Vue3涓紝杩欎簺閮藉皢鎴愪负杩囧幓銆傛湰绡囨枃绔犲皢甯︿綘璇︾粏浜嗚В浠ｇ悊浼氱粰Vue3甯︽潵浠€涔堟牱鐨勪究鍒┿€傚苟涓斾細浠庢簮鐮佸眰闈㈠憡璇変綘杩欎簺鏄浣曞疄鐜扮殑銆傚搷搴斿紡浠撳簱Vue3鍜孷ue2鐨勪笉鍚屼篃浣撶幇鍦ㄦ簮鐮佺粨鏋勪笂銆俈ue3灏嗚€﹀悎搴︾浉瀵硅緝浣庣殑鍖呭垎鏁ｅ湪packages鐩綍涓嬶紝浣滀负npm鍖呭崟鐙彂甯冦€傝繖涔熸槸闈炲父娴佽鐨勫ぇ鍨嬮」鐩鐞嗘柟寮廙onorepo銆傝礋璐ｅ搷搴斿紡閮ㄥ垎鐨勪粨搴撴槸@vue/rectivity锛屼笉娑夊強Vue鐨勪换浣曞叾浠栭儴鍒嗭紝鏄竴涓潪甯搁潪甯糕€滄浜も€濈殑瀹炵幇銆傚畠鐢氳嚦鍙互寰堝鏄撳湴闆嗘垚鍒癛eact涓€傝繖涔熶娇寰楁湰鏂囩殑鍒嗘瀽鏇村姞渚ч噸浜庡垎鏋愯繖涓粨搴擄紝鎺掗櫎浜嗗叾浠栦笉鐩稿叧鐨勯儴鍒嗐€侾roxy鍜孫bject.defineProperty涔嬮棿鐨勫尯鍒技涔庨潪甯哥浉浼笺€傚疄闄呬笂锛孭roxy鏄湪涓€涓€滄洿楂樼淮搴︹€濇嫤鎴睘鎬х殑淇敼銆備綘鎬庝箞鐞嗚В鐨勶紵鍦╒ue2涓紝瀵逛簬涓€涓粰瀹氱殑鏁版嵁锛屾瘮濡倇count:1}锛岄渶瑕佹牴鎹叿浣撶殑key锛屽嵆count杩涜鎷︽埅鈥滀慨鏀筪ata.count鈥濆拰鈥滆鍙杁ata.count鈥濓紝鍗砄bject.defineProperty(data,'count',{get(){},set(){},})蹇呴』浜嬪厛鐭ラ亾瑕佹嫤鎴殑key鏄粈涔堬紝杩欏氨鏄负浠€涔圴ue2鏃犳硶瀵瑰璞′笂鐨勬柊灞炴€у仛浠讳綍浜嬫儏.Vue3浣跨敤鐨凱roxy鏄繖鏍锋嫤鎴殑锛歯ewProxy(data,{get(key){},set(key,value){},})鍙互鐪嬪埌鏍规湰涓嶉渶瑕佸叧蹇冨叿浣撶殑key锛屽畠鎷︽埅鐨勬槸鈥滀慨鏀规暟鎹笂鐨勪换鎰忛敭鈥濆拰鈥滆鍙栨暟鎹笂鐨勪换鎰忛敭鈥濄€傛墍浠ワ紝鏃犺鏄凡鏈夌殑閽ュ寵锛岃繕鏄柊澧炵殑閽ュ寵锛岄兘閫冧笉杩囧畠鐨勯瓟鎺屻€備絾鏄疨roxy鏇村己澶х殑鍦版柟鍦ㄤ簬Proxy闄や簡get鍜宻et涔嬪杩樺彲浠ユ嫤鎴洿澶氱殑鎿嶄綔绗︺€備竴涓畝鍗曠殑渚嬪瓙馃尠鍏堝啓涓€涓猇ue3鍝嶅簲寮忕殑鏈€灏忔渚嬨€傛湰鏂囩浉鍏虫渚嬪彧浼氱敤鍒皉eactive鍜宔ffect杩欎袱涓猘pi銆傚鏋滀綘浜嗚В杩嘡eact涓殑useEffect锛岀浉淇′綘浼氱鎳傝繖涓蹇点€俈ue3鐨別ffect鍙槸useEffect鐨勨€滆繘鍖栫増鈥濓紝娌℃湁鎵嬪姩澹版槑渚濊禆銆俁eact涓墜鍔ㄥ０鏄嶽data.count]渚濊禆鐨勬楠ょ洿鎺ュ湪Vue3鍐呴儴瀹屾垚銆傚綋鍦╡ffect鍑芥暟涓鍙杁ata.count鏃讹紝瀹冨凡缁忎綔涓轰緷璧栭」琚敹闆嗕簡銆俈ue3锛?/鍝嶅簲寮忔暟鎹甤onstdata=reactive({count:1})//瑙傚療鍙樺寲effect(()=>console.log('countchanged',data.count))//瑙﹀彂console.log('countchanged',data.count)re-executedata.count=2React锛?/dataconst[data,setData]=useState({count:1})//瑙傚療鍙樺寲闇€瑕佹墜鍔ㄥ０鏄庝緷璧杣seEffect(()=>{console.log('countchanged',data.count)},[data.count])//瑙﹀彂console.log('countchanged',data.count)閲嶆柊鎵цsetData({count:2})瀹為檯鐪嬪埌杩欎釜姣斿鑱槑鐐圭殑杩樺彲浠ユ妸鐢熸晥鐨勫洖璋冨嚱鏁板拰view鐨勯噸鏂版覆鏌撳叧鑱旇捣鏉ワ紝watch鐨勫洖璋冨嚱鏁扮瓑绛夈€傘€傘€備篃鏄熀浜庤繖绉嶅搷搴旀満鍒躲€傝繖绡囨枃绔犵殑鏍稿績鐩殑鏄帰绱㈣繖涓熀浜嶱roxy鐨勫搷搴斿紡API鍙互鏈夊寮哄ぇ锛屼互鍙婂畠鍙互鍦ㄥ澶х▼搴︿笂鐩戞帶鐢ㄦ埛鐨勪慨鏀广€傚厛璇村師鐞嗭紝鍐嶇敤鏈€灏忕殑鏂瑰紡瑙ｉ噴鍝嶅簲寮忓師鐞嗐€傚叾瀹炲氨鏄湪Proxy鐨勭浜屼釜parameterhandler涓紝涔熷氨鏄痶rap绠楀瓙锛屾嫤鎴悇绉嶅彇鍊煎拰璧嬪€兼搷浣滐紝渚濋潬track鍜宼rigger杩欎袱涓嚱鏁版潵鏀堕泦渚濊禆銆傚苟鍙戦€佹洿鏂般€倀rack鐢ㄤ簬鍦ㄨ鍙栨椂鏀堕泦渚濊禆椤广€倀rigger鐢ㄤ簬鏇存柊鏃惰Е鍙戜緷璧栥€倀rackfunctiontrack(target:object,type:TrackOpTypes,key:unknown){constdepsMap=targetMap.get(target);}//鏀堕泦渚濊禆鏃堕€氳繃key鍒涘缓setletdep=newSet()targetMap.set(ITERATE_KEY,dep)//杩欎釜鏁堟灉鍙互鐞嗚В涓烘洿鏂板嚱鏁板瓨鏀惧湪dep涓璬ep.add(effect)}target鏄痶he鍘熷瀵硅薄銆倀ype鏄繖涓泦鍚堢殑绫诲瀷锛屼篃灏辨槸鍦ㄦ敹闆嗕緷璧栫殑鏃跺€欑敤鏉ユ爣璇嗘搷浣滅殑绫诲瀷銆傛瘮濡備笂闈緷璧栦腑鐨勭被鍨嬫槸get锛屽悗闈細璇︾粏瑙ｉ噴銆俴ey鏄寚杩欐璁块棶鏁版嵁涓殑鍝釜key銆傛瘮濡備笂闈緥瀛愪腑鏀堕泦渚濊禆鐨刱ey鏄痗ount銆傞鍏堬紝鍏ㄥ眬浼氭湁涓€涓猼argetMap锛岀敤浜庡缓绔媎ata->dependencies鐨勬槧灏勶紝鏄竴涓猈eakMap鏁版嵁缁撴瀯銆倀argetMap鍙互閫氳繃datatarget鑾峰彇鍒癲epsMap锛宒epsMap鐢ㄦ潵瀛樻斁杩欎釜鏁版嵁瀵瑰簲鐨勬墍鏈夊搷搴斿紡渚濊禆銆俤epsMap鐨勬瘡涓€椤归兘鏄竴涓猄et鏁版嵁缁撴瀯锛岃繖涓猄et瀛樺偍浜唊ey瀵瑰簲鐨勬洿鏂板嚱鏁般€傛槸涓嶆槸鏈夌偣缁曪紵鎴戜滑涓句竴涓叿浣撶殑渚嬪瓙鏉ヤ妇渚嬨€俢onsttarget={count:1}constdata=reactive(target)consteffect=effect(()=>{console.log(data.count)})瀵逛簬杩欎釜绀轰緥渚濊禆锛屽叏灞€targetMap鏄細targetMap:{{count:1}:dep}depisdep:{count:Set{effect}}閫愬眰寰€涓嬶紝鍙互閫氳繃target鎵惧埌count瀵瑰簲鐨剈pdate鍑芥暟effect銆傝繖閲岀殑瑙﹀彂鍣ㄦ槸涓€涓渶灏忕殑瀹炵幇锛屽彧鏄负浜嗙悊瑙ｅ師鐞嗭紝浣嗗疄闄呬笂瑕佸鏉傚緱澶氥€傚叾瀹炲瓧浣撶殑浣滅敤寰堥噸瑕併€傚厛璁颁綇浜嗭紝鍚庨潰鍐嶈缁嗚瑙ｃ€俥xportfunctiontrigger(target:object,type:TriggerOpTypes,key?:unknown,){//绠€鑰岃█涔嬶紝鎵€鏈夋洿鏂板嚱鏁伴兘鏄€氳繃key鎵惧埌骞堕『搴忔墽琛岀殑constdep=targetMap.get(target)dep.get(key).forEach(effect=>effect())}涓婇潰宸茬粡鎻愬埌浜嗘柊鐨勫睘鎬э紝鐢变簬Proxy鏍规湰涓嶅叧蹇冨叿浣撶殑key锛屾墍浠ユ病鏈夐棶棰樸€?/Reactivedataconstdata=reactive({count:1})//瑙傚療鍙樺寲鏁堟灉(()=>console.log('newCountchanged',data.newCount))//鉁呰Е鍙戝搷搴攄ata.newCount=2Newarrayindex://鍝嶅簲鏁版嵁constdata=reactive([])//瑙傚療鍙樺寲effect(()=>console.log('data[1]changed',data[1]))//鉁卼riggerResponsedata[1]=5arraycallnativemethod:constdata=reactive([])effect(()=>console.log('c',data[1]))//鏃犲搷搴攄ata.push(1)//鉁呭搷搴旇瑙﹀彂鏄洜涓轰慨鏀逛簡涓嬫爣涓?鐨刣ata.push(2)鐨勫€笺€傚叾瀹炶繖涓渚嬫洿鏈夋剰鎬濄€傛垜浠彧鏄湪璋冪敤push锛屼絾鏄綋鏁扮粍鐨勭浜岄」琚玴ush鏃讹紝鎴戜滑娉ㄦ剰data[1]浣滀负渚濊禆鐨勫洖璋冨嚱鏁颁篃琚墽琛屼簡锛岃繖鏄粈涔堝師鐞嗗憿锛熷啓涓畝鍗曠殑Proxy灏卞彲浠ヤ簡銆俢onstraw=[]constarr=newProxy(raw,{get(target,key){console.log('get',key)returnReflect.get(target,key)},set(target,key,value)澶嶅埗浠ｇ爜{console.log('set',key)returnReflect.set(target,key,value)}})arr.push(1)鍦ㄦ湰渚嬩腑锛屾垜浠彧鏄墦鍗板嚭鎵€鏈夌殑get銆乻et鎿嶄綔锛屽苟璋冪敤ReflectAPI鎸夊師鏍峰鐞嗗€煎拰璧嬪€兼搷浣滃悗杩斿洖銆傛煡鐪媋rr.push(1)涔嬪悗鎵撳嵃鍒版帶鍒跺彴鐨勫唴瀹癸紵getpushgetlengthset0setlength鍘熸潵灏弍ush浼氳Е鍙戜袱瀵筭et鍜宻et銆傛垜浠兂璞′竴涓嬭繖涓繃绋嬶細璇诲彇push鏂规硶璇诲彇arr鍘熸潵鐨刲ength灞炴€э紝缁欐暟缁勭殑绗?椤硅祴鍊笺€傝繖閲屽浜巐ength灞炴€х殑璧嬪€煎叧閿偣鍦ㄧ涓夋锛屽浜庣储寮曢」鐨勮祴鍊硷紝閭ｄ箞涓嬫push锛屽彲浠ユ兂璞″绗竴椤硅Е鍙憇et鎿嶄綔銆傝€屾垜浠湪渚嬪瓙涓鍙杁ata[1]鐨勬椂鍊欙紝鑲畾浼氭敹闆嗗埌涓嬫爣1涓婄殑渚濊禆锛岃繖灏卞緢娓呮鐨勮В閲婁簡涓轰粈涔堟帹閫佹椂鍙互鍑嗙‘瑙﹀彂鍝嶅簲寮忎緷璧栫殑鎵ц銆傞『渚胯涓€涓嬶紝璁颁綇杩欎釜闀垮害鐨勮缃搷浣滅◢鍚庝細鐢ㄥ埌锛岃繖涓€鐐瑰緢閲嶈銆傞亶鍘嗗悗娣诲姞//鍝嶅簲寮忔暟鎹甤onstdata=reactive([])//瑙傚療鍙樺寲effect(()=>console.log('datamap+1',data.map(item=>item+1))//鉁呰Е鍙憆esponse鎵撳嵃鍑篬2]data.push(1)锛岃繖涓嫤鎴緢绁炲锛屼絾鏄篃寰堝悎鐞嗭紝鎴戜滑鎶婂畠鍙樻垚鐜板疄涓殑渚嬪瓙锛屽亣璁炬垜浠鏍规嵁set璇锋眰瀛︾敓鐨勮缁嗕俊鎭痠ds鐨勫鍙蜂俊鎭紝閭ｄ箞鍙渶瑕佽繖鏍峰啓锛歝onststate=reactive({})constids=reactive([1])effect(async()=>{state.students=awaitaxios.get('students/batch',ids.map(id=>({id})))})//鉁呰Е鍙戝搷搴攊ds.push(2)杩欐牱姣忔璋冪敤鍚勭api鏀瑰彉ids鏁扮粍锛岃姹備細閲嶆柊鍙戦€佽幏鍙栨渶鏂扮殑瀛︾敓鍚嶅崟锛屽鏋滄垜鍦ㄧ洃鍚嚱鏁颁腑璋冪敤浜唌ap銆乫orEach绛堿PI锛岃鏄庢垜鍏冲績鐨勬槸鏁扮粍鐨勯暱搴﹀彉鍖栵紝閭ｄ箞鎺ㄩ€佹椂瑙﹀彂鍝嶅簲鏄畬鍏ㄦ纭殑銆備絾鏄畠鏄浣曞疄鐜扮殑锛熶技涔庡緢寰堝鏉傘€傚洜涓篹ffect绗竴娆℃墽琛岀殑鏃跺€欙紝data杩樻槸涓€涓┖鏁扮粍锛宲ush鐨勬椂鍊欐€庝箞瑙﹀彂update鍛紵鎴栬€呯敤鍒氭墠鐨勫皬娴嬭瘯鐪嬬湅map鎵ц鐨勬椂鍊欎細鍙戠敓浠€涔堛€俢onstraw=[1,2]constarr=newProxy(raw,{get(target,key){console.log('get',key)returnReflect.get(target,key)},set(target,key,value){console.log('set',key)returnReflect.set(target,key,value)}})arr.map(v=>v+1)getmapgetlengthgetconstructorget0get1鍜宲ush鏈変粈涔堝尯鍒紵瀵绘壘绾跨储锛屽彂鐜拌Е鍙憁ap鏃朵細瑙﹀彂getlength锛岃Е鍙憉pdate鏃讹紝Vue3浼氬鈥滄坊鍔爇ey鈥濊繖涓搷浣滆繘琛岀壒娈婂鐞嗐€傝繖閲屾柊寤轰竴涓笅鏍囧€间负0锛屼細鍘籫ototrigger涓繖鏍蜂竴娈甸€昏緫锛氭簮鐮佸湴鍧€//绠€鍖栫増if(isAddOrDelete){add(depsMap.get('length'))}鑾峰彇渚濊禆涔嬪墠璇诲彇闀垮害鏃舵敹闆嗭紝鐒跺悗瑙﹀彂鍑芥暟銆傝繖涓€鐐逛竴鐩簡鐒躲€傚疄闄呬笂锛宮ap鎿嶄綔璇诲彇闀垮害骞舵敹闆嗛暱搴︾殑渚濊禆椤广€傛坊鍔爇ey鏃讹紝鍙瑙﹀彂鎸塴ength鏀堕泦鐨勪緷璧栵紝瑙﹀彂鍥炶皟鍑芥暟鍗冲彲銆傚浜嗭紝forof鎿嶄綔涔熸槸鍙鐨勶細//鍝嶅簲寮忔暟鎹甤onstdata=reactive([])//瑙傚療鍙樺寲effect(()=>{for(constvalofdata){console.log('val',val)}})//鉁呰Е鍙憆esponse鎵撳嵃鍑簐al1data.push(1)鍙互鎸夌収鎴戜滑鍒氬垰鍋氱殑灏忓疄楠岃窇鎷︽埅锛宖orof涔熶細瑙﹀彂璇诲彇length銆俵ength鐪熸槸涓ソ鍚屽織鈥︹€﹀府浜嗗ぇ蹇欍€傞亶鍘嗗悗鍒犻櫎鎴栨竻闄ゆ敞鎰忎笂闈㈡簮鐮佷腑鐨勫垽鏂潯浠舵槸isAddOrDelete锛屾墍浠ュ垹闄ゆ椂涔熸槸濡傛锛屽€熷姪浜庨暱搴︿笂鏀堕泦鐨勪緷璧栥€?/绠€鍖栫増if(isAddOrDelete){add(depsMap.get('length'))}constarr=reactive([1])effect(()=>{console.log('arr',arr.map(v=>v))})//鉁呰Е鍙戝搷搴攁rr.length=0//鉁呰Е鍙戝搷搴攁rr.splice(0,1)鍙互鍝嶅簲浠讳綍鎿嶄綔锛屾垜鍠滄瀹冦€傝幏鍙栭敭constobj=reactive({a:1})effect(()=>{console.log('keys',Reflect.ownKeys(obj))})effect(()=>{console.log('keys',Object.keys(obj))})effect(()=>{for(letkeyinobj){console.log(key)}})//鉁呰Е鍙戞墍鏈夊搷搴攐bj.b=2寰楀埌keymethod鍙互鎴愬姛鎷︽埅锛屽叾瀹炶繖鏄洜涓篤ue鍐呴儴鎷︽埅浜唎wnKeys鎿嶄綔绗︺€俢onstITERATE_KEY=Symbol('iterate');functionownKeys(target){track(target,"iterate",ITERATE_KEY);}returnReflect.ownKeys(target);}ITERATE_KEY浣滀负涓€涓壒娈婄殑鏍囪瘑锛岃〃绀鸿繖鏄竴涓Dependencies鏃舵敹闆嗙殑key銆傚畠灏嗙敤浣滀緷璧栭」鏀堕泦鐨勯敭銆傞偅涔堝湪瑙﹀彂鏇存柊鐨勬椂鍊欙紝鍏跺疄瀵瑰簲鐨勬槸杩欐婧愮爜锛氾紝浠ｇ爜绠€鍖栦簡閭ｉ儴鍒嗐€傚鏋滀笉鏄暟缁勶紝鍒欒Е鍙慖TERATE_KEY瀵瑰簲鐨勪緷璧栥€傚皬褰╄泲锛歊eflect.ownKeys銆丱bject.keys鍜宖orin瀹為檯涓婅〃鐜颁笉鍚屻€俁eflect.ownKeys鍙互鏀堕泦Symbol绫诲瀷鐨勯敭鍜屼笉鍙灇涓剧殑閿€備緥濡傦細vara={[Symbol(2)]:2,}Object.defineProperty(a,'b',{enumerable:false,})Reflect.ownKeys(a)//[Symbol(2),'b']Object.keys(a)//[]鍥炲ご鐪嬪垰鎵嶈鐨刼wnKeys鎷︽埅锛宖unctionownKeys(target){track(target,"iterate",ITERATE_KEY);//杩欓噷鐩存帴returnReflect.ownKeys(target)returnReflect.ownKeys(target);}鍦ㄥ唴閮ㄧ洿鎺ヨ繑鍥濺eflect.ownKeys(target)銆傛寜鐞嗚锛屾鏃禣bject.keys鐨勬搷浣滃凡缁忛€氳繃浜嗚繖涓嫤鎴紝浼氭牴鎹甊eflect.ownKeys鐨勮涓鸿繑鍥炲€笺€備笉杩囨渶鍚庤繑鍥炵殑缁撴灉杩樻槸Object.keys鐨勭粨鏋滐紝杩樻槸姣旇緝绁炲鐨勩€傚垹闄ゅ璞″睘鎬ф湁浜嗕笂闈wnKeys鐨勫熀纭€锛屾垜浠啀鏉ョ湅杩欎釜渚嬪瓙constobj=reactive({a:1,b:2})e鈥嬧€媐fect(()=>{console.log(Object.keys(obj))})//鉁呰Е鍙戝搷搴攄eleteobj['b']杩欎篃鏄竴涓濂囩殑鎿嶄綔锛屽師鐞嗗氨鍦ㄤ簬deleteProperty鎿嶄綔绗︾殑鎷︽埅锛歠unctiondeleteProperty(target:object,key:string|symbol):boolean{const缁撴灉=鍙嶆槧銆俤eleteProperty(target,key)trigger(target,TriggerOpTypes.DELETE,key)returnresult}杩欓噷鍙堢敤鍒颁簡TriggerOpTypes.DELETE鐨勭被鍨嬨€傛牴鎹笂闈㈢殑缁忛獙锛岃偗瀹氭槸瑕佸瀹冭繘琛屼竴浜涚壒娈婄殑澶勭悊銆傚叾瀹炶繕鏄痶rigger涓殑閫昏緫锛歝onstisAddOrDelete=type===TriggerOpTypes.ADD||type===TriggerOpTypes.DELETEif(isAddOrDelete){add(depsMap.get(isArray(target)?'length':ITERATE_KEY))}杩欓噷鐨則arget涓嶆槸鏁扮粍锛屾墍浠ヨ繕鏄細瑙﹀彂ITERATE_KEY鏀堕泦鐨勪緷璧栵紝鍗充篃灏辨槸涓婇潰渚嬪瓙涓垰鍒氭彁鍒扮殑keyreading鏀堕泦鐨勪緷璧栥€傚垽鏂睘鎬ф槸鍚﹀瓨鍦╟onstobj=reactive({})effect(()=>{console.log('has',Reflect.has(obj,'a'))})effect(()=>{console.log('has','a'inobj)})//鉁呰Е鍙戜袱涓搷搴攐bj.a=1杩欎釜寰堢畝鍗曪紝灏辨槸鍒╃敤浜唄as杩愮畻绗︾殑鎷︽埅銆俧unctionhas(target,key){constresult=Reflect.has(target,key);璺熻釜锛堢洰鏍囷紝鈥滄湁鈥濓紝鍏抽敭锛夛紱returnresult;}Performance棣栧厛锛孭roxy鏄祻瑙堝櫒鐨勬柊鏍囧噯锛屾€ц兘鑲畾浼氬彈鍒板巶鍟嗙殑澶у姏浼樺寲锛屾垜浠嫮鐩互寰呫€傚浜庡搷搴斿紡鏁版嵁锛孷ue3涓嶅啀鍍廣ue2閭ｆ牱閫掑綊瀹氫箟鎵€鏈夊瓙鏁版嵁锛岃€屾槸浣跨敤reactive杩涗竴姝ュ畾涔夎幏鍙栨繁搴︽暟鎹椂鐨勫搷搴旀€э紝杩欏浜庡ぇ閲忔暟鎹垵濮嬪寲鐨勫満鏅潪甯告湁鐢ㄣ€傝濂藉浼氬緢澶с€傛瘮濡俢onstobj=reactive({foo:{bar:1}})鍒濆鍖栧畾涔塺eactive鏃讹紝鍙細娴呭畾涔塷bjreactive锛岃€岀湡姝ｈ鍙杘bj.foo鏃讹紝鍙細瀹氫箟foo銆備竴灞傚璞″畾涔夊搷搴斿紡锛岀畝鍖栨簮鐮佸涓嬶細鎯版€у畾涔夎繑鍥瀒sObject(res)鍚楋紵reactive(res):res}鎺ㄨ崘闃呰鍏跺疄Vue3瀵逛簬Map鍜孲et杩欎袱绉嶆暟鎹被鍨嬩篃瀹屽叏鏀寔鍝嶅簲寮忥紝骞朵笖瀵逛簬瀹冧滑鐨勫師鍨嬫柟娉曚篃鍋氫簡瀹岀編鐨勬嫤鎴€傞檺浜庣瘒骞咃紝鏈枃涓嶅啀璧樿堪銆傝瀹炶瘽锛孷ue3鍝嶅簲寮忛儴鍒嗙殑浠ｇ爜閫昏緫鍒嗘敮杩樻槸鏈夌偣澶氾紝瀵逛唬鐮佺悊瑙ｄ笉鏄緢鍙嬪ソ锛屽洜涓鸿繕娑夊強鍒皉eadonly绛夊彧璇绘搷浣溿€傚鏋滀綘鐪嬩簡杩欑瘒鏂囩珷锛屼綘瀵筕ue3鐨勫搷搴斿紡鍘熺悊宸茬粡寰堢啛鎮変簡銆傚鏋滄湁鍏磋叮锛屽缓璁粠绮剧畝鐗堢殑搴撳紑濮嬮槄璇绘簮鐮併€傝繖閲屾垜鎺ㄨ崘observer-util銆傜湅杩囪繖涓簱鐨勬簮鐮侊紝鍜孷ue3鐨勫疄鐜板師鐞嗗熀鏈竴鑷达紒浣嗘槸瑕佺畝鍗曞緱澶氥€傚皬鑰屽畬鏁淬€傞噷闈㈢殑绗旇涔熷緢榻愬叏銆傚綋鐒讹紝濡傛灉浣犵殑鑻辫涓嶆槸寰堢啛缁冿紝浣犱篃鍙互鐪嬬湅鎴戝熀浜巓bserver-util鐢═ypeScript+涓枃娉ㄩ噴绮惧績閲嶅啓鐨勮繖濂椾唬鐮侊細typescript-proxy-reactive杩欎釜搴撶殑瑙ｈ锛屼綘鍙互鐪嬫垜鐨勫墠涓ょ瘒锛氬甫浣犲悆閫廣ue3鐨凱roxy鍝嶅簲寮忓師鐞嗭紒TypeScript浠庨浂寮€濮嬪疄鐜颁簡涓€涓熀浜嶱roxy鐨勫搷搴斿紡搴撱€傚甫浣犲悆閫廣ue3鐨凱roxy鍝嶅簲寮忓師鐞嗭紒鍩轰簬鍑芥暟鍔寔瀹炵幇Map鍜孲et鐨勫搷搴斿紡绗簩绡囦篃鍙互鎴彇Map鍜孲et鑳藉共浠€涔堬紝婧愮爜绾х殑浜嗚В銆傜患涓婃墍杩帮紝Vue3鐨凱roxy鐪熺殑寰堝己澶э紝瑙ｅ喅浜哣ue2涓垜瑙夊緱绮剧璐熸媴姣旇緝澶х殑涓€閮ㄥ垎銆傦紙鍒氬紑濮嬫帴瑙ue鐨勬椂鍊欙紝鎴戠湡鐨勪笉鐭ラ亾浠€涔堟椂鍊欑敤$set锛夛紝瀹冪殑composition-api鍙互瀹岀編鍖归厤ReactHook锛岃€屼笖寰楃泭浜庡搷搴斿紡绯荤粺鐨勫己澶э紝鍦ㄦ煇浜涙柟闈紭浜庡畠銆傜簿璇汇€奦ue3.0 Function API銆嬪笇鏈涜繖绡囨枃绔犺兘璁╀綘鍦╒ue3姝ｅ紡鍒版潵涔嬪墠鐔熸倝Vue3鐨勪竴浜涙柊鐗规€с€傚欢浼搁槄璇籔roxy鎷︽埅鍣ㄤ腑鏈変竴涓猺eceiver鍙傛暟锛屼负浜嗙畝鍗曡捣瑙侊紝鏈枃涓嶅啀浣撶幇銆傚畠鏄共浠€涔堢敤鐨勶紵鍥藉唴鑳芥煡鍒拌繖涓祫鏂欑殑缃戠珯姣旇緝灏戯細newProxy(raw,{get(target,key,receiver){returnReflect.get(target,key,receiver)}})浣犲彲浠ュ湪StackOverflow涓婄湅鍒伴棶绛?what-is-a-receiver-in-javascript涔熷彲浠ョ湅鎴戞€荤粨浠€涔堟槸Proxy鍜孯eflect涓殑receiver锛熷箍鍛婃椂闂翠紭绉€鐨勫皬鍐屽瓙浣滆€呯濡嶆帹鍑轰簡涓€鏈畻娉曞皬鍐屽瓙锛岄€傚悎鎯冲鍓嶇绠楁硶鐨勫皬浼欎即銆傚畠鍙互甯姪浣犳帉鎻′竴浜涘熀鏈殑绠楁硶鏍稿績鎬濇兂鎴栫畝鍗曠殑绠楁硶闂銆傝繖鏈皬鍐屽瓙鎴戝弬涓庝簡涔︿腑鐨勫唴娴嬭繃绋嬶紝涔熶负绉€濡嶆彁鍑轰簡寰堝鎰忚銆備粬鐨勭洰鏍囨槸涓虹畻娉曢浂鍩虹鐨勫墠绔汉缇ゅ仛鈥滀繚濮嗗紡鏈嶅姟鈥濄€備粬寰堣创蹇儈濡傛灉杩欑瘒鏂囩珷瀵逛綘鏈夊府鍔╄鐐逛釜璧烇紝鐐逛釜璧炴敮鎸佷竴涓嬨€備綘鐨勨€滅偣璧炩€濇槸鎴戜笉鏂殑鍒涗綔璁╂垜鐭ラ亾浣犲枩娆㈢湅鎴戠殑鏂囩珷~鉂わ笍璋㈣阿浣犵殑鍏虫敞鍏紬鍙枫€婂墠绔粠杩涢樁鍒板叆瀛︺€嬪彲浠ュ姞鎴戜负濂藉弸锛屾垜鎷変綘杩涒€滃墠绔繘闃朵氦娴佺兢鈥濓紝澶у涓€璧蜂氦娴侊紝鍏卞悓杩涙銆?/p>
