鏈鍒嗕韩鐨勪富棰樻槸鈥渕obxautorun鈥濆師鐞嗚В鏋愶紝涓昏鍒嗕负浠ヤ笅鍑犱釜閮ㄥ垎锛?瑙ｆ瀽鈥渁utorun鈥濈殑鐢ㄦ硶锛?姣旇緝鈥滆嚜鍔ㄨ繍琛屸€濆拰鈥滃彂甯?璁㈤槄妯″紡鈥濈殑寮傚悓锛?瀹炵幇鈥滆嚜鍔ㄨ繍琛屸€濆姛鑳斤紱浠?鍒?瀹炵幇autorun鍔熻兘鍚庯紝鍙互浜嗚В浠ヤ笅鐭ヨ瘑锛歛utorun涓巓bservable瀵硅薄鐨勫崗鍚岃繃绋嬶紱涓轰粈涔堟彁渚涚殑鍑芥暟鍦ㄤ娇鐢╝utorun鏃剁珛鍗虫墽琛屼竴娆★紵涓轰粈涔坅utorun鏃犳硶璺熻釜寮傛閫昏緫涓璷bservable瀵硅薄鐨勫€硷紵濡備綍浣跨敤autorun//澹版槑涓€涓猳bservable瀵硅薄constmessage=observable({title:'title-01'})/*鎵цautorun骞朵紶鍏ョ洃鍚嚱鏁?/constdispose=autorun(()=>{//鑷姩鏀堕泦渚濊禆锛屾墽琛屾敞鍐屽嚱鏁癱onsole.log(message.title)})//title-01message.title='title-02'//title-02/*logoutautorun*/dispose()/*logout鍚庯紝autorun涓嶅啀鐩戝惉渚濊禆鍙樺寲*/message.title='title-03'autorun鐨勪娇鐢ㄨ繃绋嬪涓嬶細澹版槑鍙瀵熷璞★細autorun鍙細鏀堕泦鍙瀵熷璞′綔涓轰緷璧栵紱鎵цautorun锛氫紶鍏ョ洃鍚嚱鏁帮紝鎵цautorun锛沘utorun鍑芥暟涓娇鐢ㄧ殑鍙瀵熷璞″皢琚嚜鍔ㄦ敹闆嗕负渚濊禆椤癸紱autorun杩斿洖涓€涓猯ogout鍑芥暟锛岃皟鐢╨ogout鍑芥暟鍙互缁堟鐩戝惉鍑芥暟锛涗慨鏀筼bservable瀵硅薄锛氫緷璧栧彂鐢熷彉鍖栵紝autorun鑷姩鎵ц鐩戝惉鍑芥暟锛沴ogoutautorun锛氭敞閿€鍚庢敼鍙榦bservable瀵硅薄灏嗕笉鍐嶆墽琛岀洃鍚嚱鏁帮紱autorunVS鍙戝竷璁㈤槄妯″紡閫氳繃瑙傚療autorun鐨勪娇鐢ㄦ柟寮忥紝鍙互鐪嬪嚭autorun涓庝紶缁熺殑鈥滃彂甯冭闃呮ā寮忊€濋潪甯哥浉浼笺€備笅闈㈡垜浠潵姣旇緝涓€涓媋utorun鍜屸€滃彂甯?璁㈤槄妯″紡鈥濈殑寮傚悓鐐广€傛椂搴忓浘鈥滃彂甯?璁㈤槄妯″紡鈥濇秹鍙婁互涓嬩笁涓椿鍔細娉ㄥ唽锛氳闃咃紱瑙﹀彂鍣細鍙戝竷锛涙敞閿€锛氬彇娑堣闃咃紱浣跨敤鍙戝竷-璁㈤槄妯″紡瀹炵幇涓€涓€滄敞鍐?瑙﹀彂-娉ㄩ攢鈥濇祦绋嬪涓嬶細鐢╝utorun瀹炵幇涓€娆♀€滄敞鍐?瑙﹀彂-娉ㄩ攢鈥濇祦绋嬪涓嬶細瀵规瘮浠ヤ笂涓ゅ紶鏃跺簭鍥撅紝鎴戜滑鍙互寰楀嚭浠ヤ笅缁撹锛氫粠寮€鍙戣€呯殑瑙掑害锛氬湪鈥滃彂甯?璁㈤槄妯″瀷鈥濅腑锛屽紑鍙戣€呴渶瑕佸弬涓庢敞鍐屻€佽Е鍙戙€佹敞閿€锛涜妯″紡涓嬶紝寮€鍙戣€呭彧闇€瑕佸弬涓庢敞鍐屽拰娉ㄩ攢锛岃Е鍙戠敱autorun鑷姩瀹炵幇锛涗粠瀵硅薄鐨勮搴︼細鍦ㄢ€滃彂甯?璁㈤槄妯″紡鈥濅笅锛屽璞′笉鍙備笌鏁翠釜杩囩▼锛屽璞℃槸琚姩鐨勶紱鍦╝utorun妯″紡涓嬶紝observable瀵硅薄浼氬弬涓庝簨浠剁殑缁戝畾鍜岃В缁戝畾锛屽璞℃槸active鐨勶紱浠庝簨浠舵ā鍨嬬殑瑙掑害鏉ョ湅锛氬湪鈥滃彂甯?璁㈤槄妯″紡鈥濅笅锛屼簨浠舵ā鍨嬩綔涓烘帶鍒跺櫒瀵规暣涓祦绋嬭繘琛岃皟搴︼紱鍦╝utorun妯″紡涓嬶紝autorun鍜宱bservable瀵硅薄鍗忚皟鏁翠釜娴佺▼Process锛涗粠鍏ㄥ眬鏉ョ湅锛氣€滃彂甯?璁㈤槄妯″紡鈥濆唴閮ㄦ祦绋嬬畝鍗曪紝浣嗗紑鍙戣€呬娇鐢ㄨ捣鏉ュ鏉傦紱autorun妯″紡鍐呴儴娴佺▼澶嶆潅锛屼絾寮€鍙戣€呬娇鐢ㄦ柟渚匡紱autorun妯″紡瀵光€滃彂甯?璁㈤槄妯″紡鈥濆仛浜嗘敼杩涳細瑙﹀彂浜嬩欢鑷姩鍖栵紝浠庤€岄檷浣庡紑鍙戞垚鏈€侾rosautorun妯″紡鐩告瘮鈥滃彂甯?璁㈤槄妯″紡鈥濇湁浠ヤ笅浼樺娍锛歛utorun鑷姩鍖栦簨浠惰Е鍙戯紝闄嶄綆寮€鍙戞垚鏈紝鎻愰珮寮€鍙戞晥鐜囷紱Consautorun妯″紡涓庘€滃彂甯?璁㈤槄妯″紡鈥濈浉姣旀湁浠ヤ笅缂虹偣锛歛utorun鑷姩鍖栦簨浠惰Е鍙戯紝澧炲姞瀛︿範鎴愭湰鍜岀悊瑙ｆ垚鏈紱濡備綍瀹炵幇鑷姩杩愯锛熸牴鎹笂闈㈢殑鍒嗘瀽锛屾垜浠煡閬揳utorun鏄€滃彂甯?璁㈤槄妯″瀷鈥濈殑鏀硅繘鐗堬細鑷姩鍖栦簨浠惰Е鍙戙€傝繖绉嶈嚜鍔ㄥ寲鏄珯鍦ㄥ紑鍙戣€呯殑瑙掑害鏉ョ湅鐨勶紝鍗冲紑鍙戣€呬笉闇€瑕佸湪姣忔鏇存柊瀵硅薄鍊煎悗鎵嬪姩瑙﹀彂浜嬩欢妯″瀷锛涗粠瀵硅薄鐨勮搴︽潵鐪嬶紝瀵硅薄姣忔琚祴鍊奸兘浼氭墽琛屼竴涓洃鍚嚱鏁帮細鎴戜滑鍙互寰楀埌鈥滆嚜鍔ㄨЕ鍙戔€濈殑濡備笅淇℃伅锛氳Е鍙戜富浣擄細鍙瀵熷璞★紝浜嬩欢瑙﹀彂鐢卞彲瑙傚療瀵硅薄鍙戣捣锛涜Е鍙戞椂鏈猴細灞炴€ц祴鍊硷紝褰搊bservable瀵硅薄鐨勫睘鎬ц璧嬪€兼椂瑙﹀彂浜嬩欢锛涙垜浠渶瑕佽В鍐充互涓嬮棶棰橈細灏佽observableObject锛氳鏅€氬璞＄殑灞炴€у叿鏈夌粦瀹氬拰瑙ｉ櫎缁戝畾鐩戝惉鍑芥暟鐨勮兘鍔涳紱浠ｇ悊瀵硅薄灞炴€х殑鍊兼柟娉曞湪姣忔灞炴€ц祴鍊兼椂灏嗙洃鍚嚱鏁扮粦瀹氬埌瀵硅薄灞炴€э紱浠ｇ悊瀵硅薄灞炴€х殑璧嬪€兼柟娉曚簩绾у睘鎬у彇鍊兼椂鎵ц涓€涓洃鍚嚱鏁帮紱瑙ｇ粦鐩戝惉鍑芥暟锛氶渶瑕佹彁渚涗竴绉嶆満鍒舵潵瑙ｇ粦observable瀵硅薄灞炴€т笂鐨勭洃鍚嚱鏁帮紱灏佽observable瀵硅薄銆愰渶姹傛弿杩般€戜负浜嗚瀵硅薄鐨勫睘鎬у叿鏈夌粦瀹氬拰瑙ｉ櫎缁戝畾鐩戝惉鍔熻兘鐨勮兘鍔涳紝鎴戜滑闇€瑕佸皢鏅€氬璞″皝瑁呮垚observable瀵硅薄锛歰bservable瀵硅薄灞炴€ф敮鎸佺粦瀹氱洃鍚嚱鏁帮紱observable瀵硅薄灞炴€ф敮鎸佽В闄ょ粦瀹氱洃鍚嚱鏁帮紱銆愪唬鐮佺ず渚嬨€戦€氳繃璋冪敤observable鏂规硶锛屽彲浠ヤ负瀵硅薄鐨勬墍鏈夊睘鎬х粦瀹氬拰瑙ｉ櫎缁戝畾浜嬩欢锛歝onstmessage=observable({title:'title-01'})銆愭柟妗堣璁°€戝畾涔変竴涓狾bservableValue瀵硅薄锛屽嵆鐢ㄤ簬灏嗗璞＄殑灞炴€у皝瑁呮垚鍙瀵熺殑灞炴€э細){constindex=this.observers.findIndex(o=>o===observer)this.observers.splice(index,1)}trigger(){this.observers.forEach(observer=>observer())}}涓轰簡鍑忓皯瀵瑰師濮嬪璞＄殑骞叉壈锛屽皢鍙瀵熸墿灞曠殑鍔熻兘闄愬埗涓哄璞′箣涓€鍦ㄥ彲鏋氫妇绗﹀彿灞炴€т腑锛歝onst$mobx=Symbol("mobxadministration")functionobservable(instance){constmobxAdmin={}Object.defineProperty(instance,$mobx,{enumerable:false,writable:true,configurable:true,鍊硷細mobxAdmin锛寎锛夛紱...}灏嗗師濮嬪璞＄殑鎵€鏈夊睘鎬у皝瑁呭埌ObservableValue涓紝璧嬪€肩粰mobxAdmin锛?..functionobservable(instance){constmobxAdmin={}...for(constkeyininstance){constvalue=instance[key]mobxAdmin[key]=newObservableValue(value)}}浠ｇ悊鐨勫€煎拰璧嬪€煎師濮嬪璞＄殑鎵€鏈夊睘鎬у埌$mobx:...functionobservable(instance){...for(constkeyininstance){Object.defineProperty(instance,key,{configurable:true,enumerable:true,get(){returninstance[$mobx][key].value;},set(value){instance[$mobx][key].value=value;},})}...}缁戝畾鐩戝惉鍑芥暟鍜屽璞Descriptionof闇€姹傘€戠幇鍦ㄦ垜浠凡缁忓叿澶囦簡灏嗘櫘閫氬璞″皝瑁呮垚鍙瀵熷璞＄殑鑳藉姏鎺ヤ笅鏉ユ垜浠疄鐜板浣曞皢鐩戝惉鍑芥暟缁戝畾鍒板彲瑙傚療瀵硅薄涓娿€傘€愪唬鐮佺ず渚嬨€慳utorun(()=>{console.log(message.title)})銆愭柟妗堣璁°€戦€氳繃autorun鐨勪娇鐢ㄧず渚嬶紝鎴戜滑鍙互寰楀埌濡備笅淇℃伅锛氱洃鍚嚱鏁颁綔涓哄弬鏁颁紶閫掔粰autorun鍔熻兘;瀵硅薄鐨勫€兼搷浣滃彂鐢熷湪鐩戝惉鍑芥暟涓紱鎴戜滑闇€瑕佸仛鐨勬槸褰撳璞¤幏鍙栦竴涓€兼椂锛屽皢褰撳墠姝ｅ湪鎵ц鐨勭洃鍚嚱鏁扮粦瀹氬埌瀵硅薄鐨勫睘鎬т笂锛?..functionobservable(instance){...for(constkeyininstance){Object.defineProperty(instance,key,{...get(){constobservableValue=instance[$mobx][key]//鑾峰彇褰撳墠姝ｅ湪鎵ц鐨勭洃鎺у嚱鏁癱onstobserver=getCurrentObserver()if(observer){observableValue.addObserver(observer)}returnobservableValue.value;},...})}...}濡備綍鑾峰彇褰撳墠姝ｅ湪鎵ц鐨勭洃鎺у嚱鏁帮紵瀵硅薄鐨勫€间唬鐞嗘槸鍦╫bservable涓畾涔夌殑锛屼絾鏄洃鍚嚱鏁扮殑鎵ц鏄湪autorun涓紝閭ｄ箞濡備綍鍦╫bservable涓幏鍙朼utorun鐨勮繍琛屾椂淇℃伅鍛煠旓紵绛旀鏄細鍏变韩鍙橀噺observable鍜宎utorun閮藉湪mobx涓繍琛岋紝浣犲彲浠ュ湪mobx涓畾涔変竴涓叡浜彉閲忔潵绠＄悊鍏ㄥ眬鐘舵€侊細sharedvariable璁╂垜浠０鏄庝竴涓彲浠ョ鐞嗏€滃綋鍓嶆鍦ㄦ墽琛岀殑鐩戝惉鍑芥暟鈥濈殑鍏变韩鍙橀噺锛歝onstglobalState={trackingObserver:undefined,};璁╂垜浠娇鐢ㄥ叡浜彉閲忓皢鐩戝惉鍑芥暟缁戝畾鍒板彲瑙傚療瀵硅薄锛氳缃€滃綋鍓嶆鍦ㄦ墽琛岀殑鐩戝惉鍑芥暟鈥漟unctionautorun(observer){globalState.trackingObserver=observerobserver()globalState.trackingObserver=undefined}鍒嗘瀽涓婇潰鐨勪唬鐮侊紝鎴戜滑鍙互鐭ラ亾锛氳皟鐢╝utorun涔嬪悗锛屾垜浠渶瑕佺珛鍗虫墽琛屼竴涓洃鎺у嚱鏁帮紝灏嗙洃鎺у嚱鏁板拰瀵硅薄缁戝畾璧锋潵锛涙墽琛岀洃鍚嚱鏁皌rackingObserver缁撴潫鍚庝細绔嬪嵆娓呯┖锛涜繖涓ょ偣鍒嗗埆鍙互瑙ｉ噴mobx鏂囨。涓殑濡備笅璇存槑锛氫娇鐢╝utorun鏃讹紝鎻愪緵鐨勫嚱鏁版€绘槸绔嬪嵆瑙﹀彂涓€娆★紱鈥減rocess(during)鈥濊〃绀哄彧璺熻釜閭ｄ簺鍦ㄥ嚱鏁版墽琛屾椂琚鍙栫殑observable鑾峰彇骞剁粦瀹氣€滃綋鍓嶆鍦ㄦ墽琛岀殑渚﹀惉鍣ㄥ嚱鏁扳€?..functionobservable(instance){...for(constkeyininstance){Object.defineProperty(instance,key,{...get(){constobservableValue=instance[$mobx][key]constobserver=globalState.trackingObserverif(observer){observableValue.addObserver(observer)}returnobservableValue.value;},...})}...}瑙﹀彂鈥滆瀵熻€呭嚱鏁扳€濄€?.functionobservable(instance){...for(constkeyininstance){Object.defineProperty(instance,key,{...set(value){instance[$mobx][key].value=value;瀹炰緥[$mobx][key].trigger()},})}...}銆愮敤渚嬫祴璇曘€慶onstmessage=observable({title:"title-01",});autorun(()=>{console.log(message.title);});message.title="title-02";message.title="title-03";瑙ｇ粦鐩戝惉鍑芥暟涓庡璞°€愰渶姹傛弿杩般€戣В闄ょ洃鍚嚱鏁颁笌鍙瀵熷璞＄殑缁戝畾銆傝В闄ょ粦瀹氬悗锛屽璞¤祴鍊兼搷浣滃皢涓嶅啀鎵ц鐩戝惉鍑芥暟銆傘€愪唬鐮佺ず渚嬨€慶onstdispose=autorun(()=>{console.log(message.title)})dispose()銆愭柟妗堣璁°€戣В闄ょ粦瀹氬嚱鏁板皢鐩戝惉鍑芥暟浠庢墍鏈夊彲瑙傚療瀵硅薄鐨勭洃鍚垪琛ㄤ腑绉婚櫎锛歠unctionautorun(observer){...functiondispose(){//鑾峰彇鎵€鏈夊彲瑙傚療瀵硅薄constobservableValues=getObservableValues();(observableValues||[]).forEach(item=>{item.removeObserver(observer)}}returndispose}濡備綍鍦╝utorun涓幏鍙栤€滅粦瀹氱洃鍚嚱鏁扮殑鎵€鏈夊璞♀€濓紵缁戝畾鐩戝惉鍑芥暟瀵筼bservable鐨勬搷浣滄槸鍦╫bservable涓紝浣嗘槸瑙ｉ櫎缁戝畾鐩戞帶鍑芥暟鐨勬搷浣滄槸鍦╝utorun涓紝閭ｄ箞濡備綍鍦╝utorun涓幏鍙栧埌observable鐨勭浉鍏充俊鎭憿锛熸槸鐨勶紝绛旀浠嶇劧鏄細鍏变韩鍙橀噺鎴戜滑涔嬪墠浣跨敤鐨刧lobalState.trackingObserver鏄粦瀹氱殑瀹冩湰韬氨鏄洃鎺у嚱鏁帮紝鎴戜滑鍙互瀵瑰叾杩涜灏佽锛屼娇鍏惰兘澶熸敹闆嗏€滄墍鏈変笌鐩戞帶鍑芥暟缁戝畾鐨勫璞♀€濓紝涓轰簡璇存槑瀹冧笉鍐嶄粎浠呬唬琛ㄧ洃鎺у嚱鏁帮紝鎴戜滑灏嗗叾閲嶅懡鍚嶄负trackingDerivation銆傚叡浜彉閲廲onstglobalState={trackingDerivation:undefined}灏佽浜唗rackingDerivationfunctionautorun(observer){constderivation={observing:[],observer}globalState.trackingDerivation=observerobserver()globalState.trackingDerivation=undefined}杩欓噷澹版槑浜嗕竴涓淳鐢熷璞★紝瀹冨叿鏈変互涓嬪睘鎬э細observing锛氳〃绀虹粦瀹氬埌鐩戝惉鍑芥暟鐨勬墍鏈夊彲瑙傚療瀵硅薄锛涜瀵熻€咃細鐩戝惉鍑芥暟锛涜缃€滅粦瀹氬埌渚﹀惉鍣ㄥ嚱鏁扮殑瀵硅薄鈥?..functionobservable(instance){...for(constkeyininstance){Object.defineProperty(instance,key,{...get(){constobservableValue=instance[$mobx][key]constderivation=globalState.trackingDerivationif(derivation){observableValue.addObserver(derivation.observer)derivation.observing.push(observableValue)}returnobservableValue.value;},...})}...}鑾峰彇骞惰В闄ょ粦瀹氣€滅粦瀹氬埌鐩戞帶鍔熻兘鐨勬墍鏈夊璞♀€濆嚱鏁癮utorun(observer){constderivation={observing:[],observer}...functiondispose(){constobservableValues=derivation.observing;(observableValues||[]).forEach(item=>{item.removeObserver(observer)})derivation.observing=[]}returndispose}銆愮敤渚嬫祴璇曘€慶onstmessage=observable({title:"title-01",});constdispose=autorun(()=>{console.log(message.title);});message.title="title-02";dispose()message.title="title-03";鍙傝€冭祫鏂欏畬鏁村睍绀虹ず渚嬩唬鐮?/p>
