我想用通俗易懂的语言澄清watch和computed

鐨勮儗鏅€備竴鐩村vue涓殑watch鍜宑omputed鐣ユ湁浜嗚В銆傜煡閬撲竴鐐癸紙姣斿锛歸atch鍜宑omputed鐨勬湰璐ㄩ兘鏄痭ewWatcher锛屽苟涓攃omputed鏈夌紦瀛橈紝鍙湁璋冪敤渚濊禆鐨勬暟鎹彂鐢熷彉鍖栨墠浼氭墽琛岋紝浼氬啀娆¤Е鍙戙€傘€傘€傦級锛屼互鍙婄劧鍚庡氨娌℃湁浜嗐€備篃鐪嬩簡寰堝澶т浆浠啓鐨勬枃绔犮€傚垪鍑轰簡涓€澶ф鐨勬簮鐮侊紝鐪熸槸璁╂垜鑿滈笩涓€澶撮浘姘达紝涓嶆兂鐪嬩簡銆傛渶杩戝張寮€濮嬬爺绌秜ue鐨勬簮鐮侊紝鎵嶇湡姝ｆ槑鐧戒簡瀹冧滑鐨勫疄鐜板師鐞嗐€俤ata(){return{msg:'helloguys',info:{age:'18'},name:'FinGet'}}watcher浠€涔堟槸watcher锛熷惉浼楋紵鏄彮绾э紒classWatcher{constructor(vm,exprOrFn,callback,options,isRenderWatcher){}}vmvueinstanceexprOrFn鍙兘鏄竴涓瓧绗︿覆锛屼篃鍙兘鏄竴涓洖璋冨嚱鏁帮紙鏈夌偣杩风硦鍥炲ご鐪嬬湅锛岀幇鍦ㄤ笉閲嶈锛塷ptions涓€涓厤缃」锛堥厤缃粈涔堬紝鐪嬪悗闈級isRenderWatcher鏄惁鍦ㄦ覆鏌揥athcerinitStateVue鍦ㄥ垵濮嬪寲鐨勬椂鍊欎細鎵ц涓€涓猧nitState鏂规硶锛屽叾涓渶鐔熸倝鐨勫氨鏄痠nitData锛屼篃灏辨槸Object.defineProperty鏁版嵁鍔寔銆傚鍑哄嚱鏁癷nitState(vm){constopts=vm.$options;//Vue鐨勬暟鎹簮灞炴€ф柟娉曟暟鎹绠楀睘鎬atchif(opts.props){initProps(vm);}if(opts.methods){initMethod(vm);}if(opts.data){initData(vm);}if(opts.computed){initComputed(vm);}if(opts.watch){initWatch(vm,opts.watch);}}鍦ㄦ暟鎹姭鎸佽繃绋嬩腑鐢靛奖涓紝Watcher鐨勫ソ鏈嬪弸Dep鍑虹幇浜嗭紝Dep鏄负浜嗘晳Watcher銆俧unctiondefineReactive(data,key,val){letdep=newDep();Object.defineProperty(data,key,{get(){if(Dep.target){dep.depend();//鏀堕泦渚濊禆鍏崇郴}returnval;},set(newVal){if(newVal===val)return;val=newVal;dep.notify();//閫氱煡鎵ц}})}initData鏃讹紝Dep.target浠€涔堥兘娌℃湁锛屾墍浠ュ鐙殑闆嗗悎銆傜洰鏍囩粦瀹氬埌Dep绫伙紙闈欐€佸睘鎬э級锛岃€屼笉鏄疄渚嬨€備絾鏄湪$mount涔嬪悗灏变笉涓€鏍蜂簡銆傝嚦浜?mount涓墽琛屼粈涔坈ompile銆乬enerate銆乺ender銆乸atch銆乨iff锛屼笉鏄湰鏂囩殑閲嶇偣锛屼笉閲嶈锛岀粫閬擄紒浣犲彧闇€瑕佺煡閬撲竴浠朵簨锛氫笅闈㈢殑浠ｇ爜浼氳鎵цnewWatcher(vm,updateComponent,()=>{},{},true);//true琛ㄧず鏄鍦ㄦ洿鏂扮殑娓叉煋watcherupdateComponent锛屼笉绠″叿浣撴墽琛岋紝鐜板湪鏄洖璋冨嚱鏁帮紝浼氭洿鏂伴〉闈紝浼氫繚瀛樺湪Watcher鐨刧etter涓€傚搴斿紑澶寸殑exprOrFn鍙傛暟銆傚樋鍢垮樋锛岃繖娆′笉涓€鏍蜂簡锛氭覆鏌撻〉闈㈠氨鏄皟鐢ㄤ綘瀹氫箟鐨勬暟鎹紙涓嶇敤鎷呭績锛屽畾涔変簡娌¤皟鐢級锛屼細鍘籫et銆俷ewWatcher浼氳皟鐢ㄤ竴涓柟娉曟妸杩欎釜瀹炰緥鏀惧湪Dep.target涓娿€俻ushTarget(watcher){Dep.target=watcher;}杩欎袱浠朵簨纰板阀鍦ㄤ竴璧凤紝鐒跺悗dep.depend()灏变細璧蜂綔鐢ㄣ€傛墍浠ヨ繖閲屽彲浠ョ悊瑙ｄ竴涓笢瑗匡紝鎵€鏈夊畾涔夊湪data涓殑鏁版嵁锛屽彧瑕佽璋冪敤锛屽氨浼氭敹闆嗕竴涓猺enderingwatcher锛屼篃灏辨槸鏁版嵁鍙戠敓鍙樺寲锛屾墽琛宻et涓殑dep.notify灏变細鎵цrendering瑙傚療鑰呫€備笅鍥炬槸瀹氫箟msg銆乮nfo銆乶ame涓変釜鏁版嵁锛屽畠浠兘鏈変竴涓覆鏌揥atcher锛氱溂灏栫殑鏈嬪弸搴旇鐪嬪埌msg涓湁涓や釜watcher锛屼竴涓槸鐢ㄦ埛鑷畾涔夌殑watch锛屼竴涓篃鏄痷ser-瀹氫箟鎵嬭〃銆傚晩锛屽綋鐒朵笉鏄紝vue宸茬粡鍘婚噸浜嗭紝涓嶄細鏈夐噸澶嶇殑watchers浜嗐€傚鎮ㄦ墍鏂欙紝鍙︿竴涓槸璁＄畻鐨勮瀵熻€咃紱鐢ㄦ埛鎵嬭〃锛屾垜浠竴鑸繖鏍蜂娇鐢ㄦ墜琛細('mywatch',newVal,oldVal)},immediate:true}}here浼氭墽琛屼竴涓猧nitWatch锛岀粡杩囦竴灏忔鎿嶄綔鍚庯紝浼氭彁鍙杄xprOrFn锛堟鏃舵槸瀛楃涓诧級銆乭andler銆乷ptions锛屽叾涓帿鍚嶄笌Watcher濂戝悎锛岀劧鍚庨『鐞嗘垚绔犺皟鐢╲m.$watch鏂规硶銆俈ue.prototype.$watch=function(exprOrFn,cb,options={}){options.user=true;//鏍囪涓虹敤鎴疯瀵熻€?/鏍稿績鏄垱寤轰竴涓瀵熻€卌onstwatcher=newWatcher(this,exprOrFn,cb,options);if(options.immediate){cb.call(vm,watcher.value)}}鎷滄墭锛屾垜鍏嶄笉浜嗚鐪嬭繖娈典唬鐮侊紙鎴戜竴寮€濮嬭创浜嗗緢闀夸竴娈碉紝浣嗘槸鎴戣鐨勬槸閫氫織鏄撴噦鐨勮嫳鏂囷紝鎵€浠ユ垜灏辨妸瀹冨拰杩欓儴鍒嗗叧绯讳笉澶х殑鍒犳帀锛夛細classWatcher{constructor(vm,exprOrFn,callback,options,isRenderWatcher){this.vm=vm;this.callback=鍥炶皟锛泃his.options=閫夐」锛涘鏋滐紙閫夐」锛墈this.user=!!options.user;}this.id=id++;if(typeofexprOrFn=='function'){this.getter=exprOrFn;//灏嗗唴閮ㄥ洖璋冨嚱鏁版斁鍏etter灞炴€т腑}else{this.getter=parsePath(exprOrFn);濡傛灉(!this.getter){this.getter=(()=>{});}}this.value=this.get();}get(){pushTarget(杩欎釜);//灏嗗綋鍓嶈瀵熻€呭瓨鍌ㄥ湪dep涓璴etresult=this.getter.call(this.vm,this.vm);//renderingwatcher鐨勬墽琛屼細杞埌observe鐨刧et鏂规硶锛岀劧鍚庝繚瀛楴extthiswatcherpopTarget();//鎵ц鍒拌繖涓€姝ョ殑鏃跺€欏啀璁╁畠涓虹┖锛屾墍浠ョ湅鎯呭喌璧栨敹闆嗗畬鎴愶紝閮芥槸鍚屼竴涓獁atcher杩斿洖缁撴灉锛泒}//杩欎釜鏄敤鏉ヨ幏鍙杕sg鐨勫€肩殑锛屼篃灏辨槸oldValfunctionparsePath(path){if(!path){return}varsegments=path.split('.');returnfunction(obj){for(vari=0;iget->dep.depend()銆俧unctioninitComputed(vm){letcomputed=vm.$options.computed;constwatchers=vm._computedWatchers={};for(letkeyincomputed){constuserDef=computed[key];//鑾峰彇鑾峰彇鏂规硶constgetter=typeofuserDef==='function'?userDef:userDef.get;//鍒涘缓涓€涓绠楀睘鎬atcherlazy鎰忓懗鐫€绗竴娆′笉璋冪敤watchers[key]=newWatcher(vm,userDef,()=>{},{lazy:true});defineComputed(vm,key,userDef)}}constsharedPropertyDefinition={enumerable:true,configurable:true,get:()=>{},set:()=>{}}functiondefineComputed(target,key,userDef){if(typeofuserDef==='function'){sharedPropertyDefinition.get=createComputedGetter(key)}else{sharedPropertyDefinition.get=createComputedGetter(userDef.get);sharedPropertyDefinition.set=userDef.set;}//浣跨敤defineProperty琚畾涔夛紝杩欐牱瀹冨氨鍙互鐢ㄦ潵璁＄畻Object.defineProperty(target,key,sharedPropertyDefinition)}涓嬮潰杩欎竴娈垫槸鏈€閲嶈鐨勩€傜湅鐪嬩笂闈㈢殑鍐呭銆備互涓婂氨鏄壘鍑篻et鏂规硶锛岀粦瀹歄bject.defineProperty銆俢lassWatcher{constructor(vm,exprOrFn,callback,options,isRenderWatcher){...this.dirty=this.lazy;//lazy涓嶆槸绗竴娆℃墽琛宼his.value=this.lazy?鏈畾涔夛細this.get()锛?..}update(){if(this.lazy){//璁＄畻灞炴€ч渶瑕佹洿鏂皌his.dirty=true;}elseif(this.sync){this.run();}else{queueWatcher(this);//杩欏彧鏄竴涓櫔琛紝鎴戜滑鐜板湪蹇界暐瀹儅}evaluate(){this.value=this.get();this.dirty=false;}}缂撳瓨鍦ㄨ繖閲岋紝鎵цget鏂规硶浼氬緱鍒颁竴涓繑鍥炲€紅his銆倂alue鏄紦瀛樼殑鍊笺€傚湪鐢ㄦ埛瑙傚療鑰呬腑锛屽畠鏄痮ldValue銆傚啓鍒拌繖閲岋紝鎴戝娓稿ぇ绁炵殑鏁话鏇存繁浜嗐€傪煇傪煃鸿繕鏈夛紒functioncreateComputedGetter(key){returnfunctioncomputedGetter(){//this鎸囧悜vue瀹炰緥constwatcher=this._computedWatchers[key];if(watcher){if(watcher.dirty){//濡傛灉dirty涓虹湡watcher.evaluate();//璁＄畻鏂板€煎苟灏哾irty鏇存柊涓篺alse}//濡傛灉渚濊禆鍊间笉鍙橈紝鍒欒繑鍥炵粨鏋滄渶鍚庝竴娆¤绠楄繑鍥瀢atcher.value}}}watcher鐨勬洿鏂版槸浠€涔堟椂鍊欒皟鐢ㄧ殑锛熷嵆濡傛灉鏁版嵁鏇存柊璋冪敤浜哾ep.notify()锛宒irty闇€瑕佸彉涓簍rue锛屼絾鏄绠楀嚭鏉ョ殑灞炴€ц繕鏄笉鑳介┈涓婅绠楀嚭鏉ワ紝璋冪敤鐨勬椂鍊欒繕鏄渶瑕佽绠楃殑锛屾墍浠ュ彧鏄敼鍙樹簡dirty鐨勭姸鎬佹洿鏂版湡闂达紒閭ｄ箞涓嬫璋冪敤鐨勬椂鍊欎細閲嶆柊璁＄畻銆俢lassDep{constructor(){this.id=id++;杩欎釜.subs=[];}addSub(watcher){this.subs.push(watcher);}depend(){Dep.target.addDep(this);}notify(){this.subs.forEach(watcher=>watcher.update())}}鎬荤粨watch鍜宑omputed鏈川涓婇兘鏄疻atcher锛岄兘瀛樺偍鍦―ep涓紝褰撴暟鎹彂鐢熷彉鍖栨椂锛屾墽琛宒ep.notify杩愯鎵€鏈夌殑Watchers瀛樻斁鍦ㄥ搴旂殑Dep瀹炰緥涓紝浠ヤ究鍒锋柊娓叉煋Watcher椤甸潰锛涙瘡涓暟鎹兘鏈夎嚜宸辩殑Dep锛屽鏋滃湪妯℃澘涓皟鐢紝蹇呴』鏈夋覆鏌揥atcher锛沬nitData鏃讹紝娌℃湁Watcher鏀堕泦锛涘彂鐜版病鏈夛紝鍦ㄦ覆鏌揥atcher鍜孋omputed涓紝exprOrFn鏄竴涓嚱鏁帮紝鑰寀serWatcher鏄竴涓瓧绗︿覆銆傛枃绔犱腑鐨勪唬鐮佹槸绮剧畝鐗堬紝杩樻湁寰堝缁嗚妭娌℃湁鎻愬埌銆傚畠浠苟涓嶉噸瑕侊紝浣嗗鏈枃鏉ヨ骞朵笉閲嶈銆傛偍鍙互闃呰婧愪唬鐮佷互鑾峰緱鏇存繁鍏ョ殑浜嗚В銆?/p>