Vue3鍜孷ue2鐨勫搷搴斿紡鏈夊緢澶х殑涓嶅悓銆傜敱浜嶸ue3浣跨敤Proxy鑰屼笉鏄痙efineProperty锛屽洜姝ue3鍦ㄥ搷搴斿紡鏁版嵁澶勭悊鏂归潰姣擵ue2鏈夋洿濂界殑琛ㄧ幇銆傛洿绠€娲侀珮鏁堢殑澶勭悊鏂瑰紡涔熷疄鐜颁簡寰堝鍦╒ue2涓婃棤娉曞疄鐜扮殑鍔熻兘銆傚彟澶栵紝Vue3鐨勫搷搴斿紡搴搑eactivity鏄竴涓崟鐙殑鍖咃紝鍙互鑴辩Vue杩愯锛屼篃灏辨槸璇存垜浠彲浠ュ湪鍏朵粬妗嗘灦涓繍琛屻€傚叾瀹濾ue3鐨勫搷搴斿紡搴撶殑瀹炵幇鍜屽競闈笂澶ч儴鍒嗗叾浠栧搷搴斿紡搴擄紙姣斿observer-util銆乵eteor绛夛級鐨勫疄鐜版槸宸笉澶氱殑锛岃€屼笖Vue涔熸槸鍙傝€冭繖浜涘簱瀹炵幇鐨勶紝鎵€浠ユ垜浠繕鏄緢鐔熸倝瀹冦€傚緢鏈夊繀瑕佸幓鐮旂┒涓€涓嬶紝姣曠珶鎴戜滑涓嶈兘钀藉悗馃槃锛屾墍浠ュ皬浼欎即浠紝涓€璧锋潵鐪嬬湅杩欎釜@vue/reactivity鏄浣曞疄鐜扮殑鍚с€傛湰鏂囨簮鐮佸凡缁忚创鍦ㄦ垜鐨刧it涓婁簡锛屽彲浠ュ幓鏌ョ湅锛歳eactivity鍦ㄩ槄璇绘湰鏂囦箣鍓嶏紝浣犲繀椤诲厛浜嗚В浠ヤ笅鐭ヨ瘑鐐筗eakMapSetReflectProxy涓婇潰涓嶆槑鐧界殑鍚屽鍙互鐩存帴鐐归摼鎺ユ煡鐪嬭缁嗘枃妗ｏ紝鏂囦腑涓嶅啀璇﹁堪銆?-鍏堢湅涓€涓娇鐢╮eactivity鐨勪緥瀛?/鍒涘缓涓€涓搷搴斿紡瀵硅薄conststate=reactive({count:1})//鎵цeffecteffect(()=>{console.log(state.count)})state.count=2//褰揷ount鍙戠敓鍙樺寲鏃讹紝鎵цeffect涓殑鍑芥暟锛屾帶鍒跺彴杈撳嚭2銆傛湰渚嬮€氳繃reactive鍒涘缓涓€涓猺eactive瀵硅薄鐘舵€侊紝鐒跺悗璋冪敤effect鎵ц鍑芥暟銆傝繖涓嚱鏁板唴閮ㄨ闂簡state鐨勫睘鎬э紝鐒跺悗鎴戜滑鏀瑰彉杩欎釜state鐨勫睘鎬э紝杩欎釜鏃跺€欙紝鐢熸晥鐨勫嚱鏁板張浼氳鎵ц銆傞€氬父瀹炵幇杩欑鍝嶅簲寮忔暟鎹殑鏂瑰紡鏄畾涔変竴涓暟鎹负鍝嶅簲寮忥紙閫氬父閫氳繃defineProperty鎴朠roxy鏉ユ嫤鎴猤et銆乻et绛夋搷浣滐級骞跺畾涔変竴涓壇浣滅敤鍑芥暟锛坋ffect锛夈€傚綋sideeffectfunction鍐呴儴璁块棶reactivedata鏃朵細瑙﹀彂1涓殑getter锛岀劧鍚庡氨鍙互鍦ㄨ繖閲岄噰闆唀ffect浜嗐€傚綋淇敼鍝嶅簲寮忔暟鎹椂锛屼細瑙﹀彂1涓殑setter锛岀劧鍚庢墽琛?涓敹闆嗙殑鏁堟灉鍑芥暟銆傚叧浜巈ffect锛欵ffect鍦╒ue涓€氬父琚О涓簊ideeffectfunction锛屽洜涓烘绫诲嚱鏁伴€氬父浼氭墽琛屽叾浠栦换鍔★紝渚嬪缁勪欢娓叉煋鍜岃绠楀睘鎬с€傚湪鍏朵粬鐨勫簱涓紝瀹冨彲鑳借绉颁负瑙傚療鑰呭嚱鏁帮紙observe锛夋垨鍏朵粬锛屽彧瑕佷釜浜鸿兘澶熺悊瑙ｅ畠鐨勬剰鎬濆嵆鍙€傜敱浜庢湰鏂囧垎鏋愮殑鏄疺ue3锛屾墍浠ョО涔嬩负鍓綔鐢ㄥ嚱鏁帮紙effect锛夈€傛牴鎹互涓婃€濊矾锛屾垜浠彲浠ュ厛寮€濮嬪疄鐜皉eactive銆傛垜浠渶瑕佷竴涓弽搴斿嚱鏁版潵浣挎垜浠殑鏁版嵁鍝嶅簲銆?/reactive.tsimport{baseHandlers}from'./handlers'import{isObject}from'./utils'typeTarget=objectconstproxyMap=newWeakMap()瀵煎嚭鍑芥暟reactive(target:T):T{returncreateReactiveObject(target)}functioncreateReactiveObject(target:Target){//鍙粰瀵硅薄娣诲姞reactiveif(!isObject(target)){returntarget}//Reactive鏁版嵁涓嶈兘閲嶅瀹氫箟if(proxyMap.has(target)){returnproxyMap.get(target)}//閫氳繃Proxy鎷︽埅瀵规暟鎹殑鎿嶄綔constproxy=newProxy(target,baseHandlers)//鍚慞roxyMap涓坊鍔犳暟鎹畃roxyMap.set(target,proxy)returnproxy}杩欓噷涓昏閽堝鏁版嵁绠€鍗曞垽鏂竴涓嬶紝鍏抽敭鏄痗onstproxy=newProxy(target,baseHandlers)涓€氳繃Proxy澶勭悊鏁版嵁锛屽叾涓璪aseHandlers鏄嫤鎴猤et锛宻et绛夋暟鎹紝鎴戜滑鍏堝疄鐜癰aseHandlersget闆嗗悎渚濊禆瀹炵幇鎷︽埅get鎿嶄綔锛岃繖鏍峰湪璁块棶鏁版嵁鐨勬煇涓猭ey鏃讹紝鍑芥暟锛堜綔鐢級鍙互鏀堕泦鍜屽瓨鍌ㄨ闂瀵嗛挜鐨勪俊鎭€?/handlers.tsimport{track}from'./effect'import{reactive,Target}from'./reactive'import{isObject}from'./utils'exportconstbaseHandlers:ProxyHandler
