鍓嶈█鐪媀ue婧愮爜鍙槸涓轰簡闈㈣瘯锛熸垜鎯冲彲鑳藉緢澶氫汉閮借繖涔堣涓哄惂锛佷絾鎴戜笉杩欎箞璁や负鈥︹€︿负浠€涔堬紵锛坧s锛氬悗闈㈠啀璇淬€傘€傘€傦級褰撶劧锛屽綋浣犻€夋嫨闃呰Vue婧愮爜鐨勬椂鍊欙紝纭疄闇€瑕佷竴瀹氱殑鍕囨皵銆備綘涓轰粈涔堣繖涔堣锛熷鏋滀綘鑺辨椂闂村嵈涓€鏃犳墍鑾凤紝浣犱竴瀹氫細鎰熷埌澶辫惤銆傛墍骞革紝鍔熷か涓嶈礋鏈夊績浜恒€傝繖娈垫椂闂达紝閫氳繃涓嶆柇鐨勬€濊€冿紝鎴戞湁鎵€鏀惰幏銆備粈涔堟牱鐨勭鐩兘浼撮殢鐫€鈥︹€﹁繕鏄緢鏈夋敹鑾风殑銆傚垵濮嬬殑_initVue鏋勯€犲嚱鏁颁粠_initapi寮€濮嬪伐浣溿€傚緢澶歛pi閮芥槸鍦╥nit.js鏂囦欢涓嬪垵濮嬪寲鐨勩€傚叿浣撳彲浠ユ煡鐪嬫簮鐮併€傚湪杩欓噷鎴戝彧鏄兂鍒嗕韩涓€涓嬫垜鐨勭粡楠?..鍒濆鐨刬nitComputed鍜宨nitWatch閫氬父浣跨敤鎻愬埌鐨刢omputed鍏锋湁缂撳瓨鐨勪綔鐢紝瀹冧細鏍规嵁鏌愪釜鏁版嵁鐨勫彉鍖栬€屽彉鍖栵紱watch寮€鍚椂immediate:true锛屼负浠€涔堟瘮mountedhook鍏堟墽琛岋紵浠ュ強涓よ€呮湁浠€涔堝尯鍒紝鍦ㄩ」鐩腑濡備綍閫夋嫨绛夌瓑鈥︹€﹁繖浜涢棶棰橀兘鍦╥nitComputed鍜宨nitWatch鍑芥暟涓憡璇変簡鎴戙€傛簮鐮佹€濊矾initComputed锛氬唴閮ㄥ師鐞嗘槸浣跨敤Watcher绫绘潵瀹炵幇鎴戜滑涓篶omputedoption鍐欑殑姣忎竴涓璞★紝閫氳繃newWatcher灏佽鏋勯€犱竴涓猚omputedWatcher瀹炰緥锛屽苟浼犲叆涓€涓猚omputedLazy:true鏍囧織鏉ュ疄鐜扮紦瀛樻満鍒躲€傞偅涔圵atcher绫诲埌搴曞仛浜嗕粈涔堬紵锛坧s锛歐atcher绫荤殑瀹炵幇锛屽悗闈細璇︾粏浠嬬粛锛夐鍏堜細鍦╓atcher绫荤殑鏋勯€犲嚱鏁板唴閮ㄥ彇鍊笺€傜劧鍚庡ソ鍍忔槸鎶奵omputed鐨勬瘡涓璞￠兘灏佽鎴愪竴涓猚omputedWatcher瀹炰緥锛岀劧鍚庡啀閫氳繃Object.defineProperty鎶婃瘡涓猚omputedWatcher瀹炰緥灏佽涓€閬嶏紝浣跨敤鐨勬椂鍊欎細瑙﹀彂get銆俫et鍑芥暟浼氭嫤鎴垽鏂璫omputedWatcher瀹炰緥鐨刣irty鍊硷紝涓簍rue瑙﹀彂watcher绫荤殑evaluate鍑芥暟锛岀敤浜庤幏鍙栧€硷紝鏈€鍚庡叧闂璬irty銆傚鏋渄irty涓篺alse锛屽垯鐩存帴杩斿洖绗竴娆¤幏鍙栫殑鍊笺€傜悊娓呰繖涓€濊矾鍚庯紝澶ф鍐欎簡涓吉浠ｇ爜鏉ュ疄鐜颁笂闈㈢殑閫昏緫锛氳繖閲屽簲璇ユ竻妤氾紝computed鐨勭紦瀛樻満鍒朵笌鏄惁渚濊禆鍝嶅簲寮忔暟鎹棤鍏炽€傛兂浜嗘兂锛屽張鎯充簡鎯筹細濡傛灉鎴戝啓涓€涓笉渚濊禆data閫夐」鐨勬暟鎹垨鑰卲rops鐨勬暟鎹殑computed瀵硅薄锛岄偅涔堝綋鎴戞敼鍙榗omputed鐨勬椂鍊欙紝鎬庝箞鑳戒笉琚玾atch閫夐」鐩戝惉鍛紵浠峰€硷紵(鍙互鎵嬫暡)computed:{getC:{get:()=>{return1;},璁剧疆:(newVal)=>{returnnewVal;},},},mounted(){setTimeout(()=>{this.getC=8;},800);},watch:{getC:{handler:function(){console.log(this.getC,"ccannotbemonitored");//涓嶈兘鎵撳嵃},},},computed閲岄潰鐨凮bject.defineProperty涓缃殑涓嶅仛浠讳綍渚濊禆鍙樺寲鐨勯€氱煡銆俰nitComputed鏈€缁堝緱鍒扮殑鏄竴涓€硷紝杩欎釜鍊煎彲浠ヤ緷璧栦簬鏌愪釜鍝嶅簲寮忔暟鎹笌鍚︺€傚鏋滀綘渚濊禆涓€涓搷搴斿紡鏁版嵁鎴栬€呭涓搷搴斿紡鏁版嵁锛屽綋鍝嶅簲寮忔暟鎹彂鐢熷彉鍖栨椂锛屽畠涔熶細鍙戠敓鍙樺寲銆傝繖鏄洜涓哄搷搴斿紡鏁版嵁浣跨敤newDep鍒涘缓浜嗕竴涓猟ep瀹炰緥锛屽苟閫氱煡set鍑芥暟涓殑閭ｄ簺渚濊禆瀹冪殑watcher銆傞偅涔堜负浠€涔堜笉琚玾atch閫夐」鐩戞帶鍛紵watch閫夐」鐩戝惉鍝嶅簲寮忔暟鎹紝鎵цwatch閫夐」鐨勫洖璋冨嚱鏁板湪dep閫氱煡update鍙樺寲鏃舵墽琛屻€備竴涓笉渚濊禆浜庡搷搴斿紡鏁版嵁鐨勮绠楀璞″浣曡閫氱煡鍙樺寲锛熻繖鏍锋寜鐞嗚watch鏄敤鏉ョ洃鍚竴涓€肩殑鍙樺寲鐨勶紝鎺ユ敹鍒扮殑鍊兼槸鏂板彉鍖栫殑鍊笺€傚洖鍒版渶鍒濈殑闂锛宨mmediate:true鐨勫疄鐜板師鐞嗘槸浠€涔堬紵褰搃mmediate:true寮€鍚椂锛寃atch鐨勫洖璋冨嚱鏁颁細鍏堟墽琛屻€傝繖鏄洜涓簀s鏄崟绾跨▼鐨勶紝鍒濆鍖朹init鐨勬椂鍊檌nitWatch鏃╀簬mounted銆俰nitWatch鐨勫叧閿槸vm.$watch銆傚疄鐜拌鍑芥暟鏃讹紝鍒ゆ柇immediate鏄惁涓虹湡锛屽鏋滀负鐪燂紝鍒欑珛鍗虫墽琛屽洖璋冨嚱鏁般€傞€氳繃杩欎簺鍐呭锛屼竴涓疄鐜扮紦瀛樻満鍒剁殑鎯虫硶鍦ㄦ垜鑴戞捣涓诞鐜般€傚悎鐞嗙殑浣跨敤Object.defineProperty鍙互瀹炵幇涓€浜涙暟鎹殑鎷︽埅锛屼篃鏄浉褰搊k鐨勶紒鏈€鍒濈殑鍝嶅簲寮忔暟鎹畃rops鍜屾暟鎹€夐」閮芥槸鍝嶅簲寮忔暟鎹€俈ue鏄浣曡props鍜宒ata鐨勬暟鎹彲瑙傚療鐨勫憿锛熶娇鐢∣bject.defineProperty瀵瑰璞¤繘琛屽皝瑁呴泦鎴愶紝閫氳繃閲嶅啓鏁扮粍鐨勬柟娉曟潵閲嶅啓鏁扮粍銆傚湪Vue婧愮爜涓紝鏁版嵁鍔寔鏄€氳繃涓€涓狾bserver绫绘潵瀹炵幇鐨勶紝涔熷氨鏄鍦ㄦ暟鎹拰props鍒濆鍖栫殑鏃跺€欙紝浼氳皟鐢╫bserver鏂规硶銆傝鏂规硶鍒ゆ柇鏁版嵁绫诲瀷锛屽喅瀹氭槸閲嶆柊灏佽瀵硅薄杩樻槸閲嶅啓鏂规硶銆傞偅涔堣繖涓庡搷搴旇兘鍔涙湁浠€涔堝叧绯诲憿锛熸垜寰堢撼闂凤紝鎴戝湪data閫夐」涓畾涔変簡涓€涓彉閲廰锛岀劧鍚庢敼鍙樹簡鍙橀噺a鐨勫€硷紝涓轰粈涔堟墍鏈夌敤鍒板畠鐨勫湴鏂归兘浼氳嚜鍔ㄦ洿鏂板€硷紵鑰冭檻鍝嶅簲寮忔暟鎹殑鍏抽敭鏄疻atcher绫诲拰Dep绫诲湪涓棿璧风潃鍏抽敭浣滅敤銆傝繖涓や釜绫诲叿浣撳仛浜嗕粈涔堬紵Watcher锛堣瑙傚療鑰咃級鍔熻兘1銆佸湪瀹炰緥鍖栬嚜韬椂灏嗚嚜宸辨坊鍔犲埌灞炴€ubscriber(dep)涓€?.瀹冨繀椤绘湁涓€涓猽pdate()鏂规硶銆?銆佸綋dep.notice()琚€氱煡灞炴€у彉鍖栨椂锛屽彲浠ヨ皟鐢ㄨ嚜宸辩殑update()鏂规硶銆俤ep(observer)鍑芥暟1.鏈変竴涓猣rame鏉ユ敹闆嗘瘡涓獁atcher銆?.鏈変竴涓猘ddSub()鏂规硶鏉ユ敹闆嗚瀵熻€呫€?.鏈塶otification鏂规硶閫氱煡watcher鏇存柊銆傛彁鐐煎嚭涓よ€呯殑浣滅敤鍚庯紝瀹冧滑鏄浣曞伐浣滅殑锛熷綋Wtacher绫昏瀹炰緥鍖栨椂锛屽畠閫氳繃鍦―ep绫讳笂瀹氫箟鐩爣灞炴€ф潵鍏宠仈watcher瀹炰緥銆傜劧鍚庯紝瀵逛簬鍙橀噺a锛屽湪鐢∣bject.defineProperty鍒濆鍖栧拰鎵撳寘鏁版嵁鏃讹紝閫氳繃鏂板缓Dep绫诲疄鐜颁緷璧栧彉閲廰鐨剋atcher锛坧s锛氳繖涓猟ep瀹炰緥鍙互鐪嬪埌涓€涓猣rame锛屾敹闆嗚繖浜涗緷璧栫殑watcher瀹炰緥閫氳繃妗嗘灦鍦ㄥ彉閲廰涓婏級瀹炰緥琚敹闆嗐€傝繖涓猟ep瀹炰緥鍏跺疄灏辨槸涓€涓睘浜庡彉閲廰鐨勫皬鐩掑瓙锛屽畠鎶婁緷璧栧畠鐨剋atcher鏀惧埌dep瀹氫箟鐨勫皬鐩掑瓙閲屻€傚湪绛夊緟鍙橀噺a鍙戠敓鍙樺寲鏃讹紝瑙﹀彂set鍑芥暟涓璬ep鐨刵otify鍑芥暟锛岄€氱煡鎵€鏈墂atcher璋冪敤update鍑芥暟鏇存柊鍊笺€傚彟涓€涓緥瀛愭槸鎴戦€夋嫨鍦╟omputed涓畾涔塯etA鐨勪竴涓睘鎬с€傚湪鍒濆鍖朿omputed鏃讹紝newWatcher浼氬皢鑷繁鐨刧etA璁剧疆涓篋ep.target銆傚鏋済etA灞炴€ф湁涓€涓緷璧栦簬data閫夐」瀹氫箟鐨勫彉閲廰鍊硷紝鍒欏湪鑾峰彇鍙橀噺a鐨勫€兼椂浼氳Е鍙慜bject.defineProperty鐨刧et鏂规硶锛屽苟鍦ㄨ鏂规硶涓敹闆唃etA鐨剋atcher渚濊禆锛屽嵆getA浼氳涓㈣繘鍙橀噺a涓€傞儴闂ㄦ銆傛墍浠bserver绫荤殑瀹炵幇骞朵笉闅撅紝鍏抽敭鏄疻atcher绫诲拰Dep绫汇€俉atcher绫诲拰Dep绫荤殑瀹炵幇鏂瑰紡鎴戦€氳繃妯℃嫙Vue婧愮爜鍐欎簡涓€涓吉浠ｇ爜渚涘弬鑰冿細锛屾纭殑锛熻€屼笉鏄粎浠呭洜涓篛bject.defineProperty~杩斿洖Vue鐨勫搷搴斿紡data/props锛屽湪婧愮爜涓篃鍋氫簡涓€灞備唬鐞嗭紝鎵€浠ユ垜浠啓浠ｇ爜鐨勬椂鍊欏彲浠ョ洿鎺ラ€氳繃this.xxx鏉ヨ闂彉閲忋€傚啓杩欐浼唬鐮佺殑鏃跺€欙紝璁╂垜鎯宠捣浜唀s6鐨凱roxy绫汇€傚垵濮媙extTick鍦ㄤ簡瑙extTick涔嬪墠锛屾垜浠厛鏉ョ湅涓€涓渚嬨€傛渚嬩腑鏈変竴绉嶆儏鍐碉細鎸傝浇鏃讹紝test鐨勫€间細琚?+寰幆鎵ц1000娆°€傛瘡娆?+閮戒細鏍规嵁鍝嶅簲蹇參瑙﹀彂setter->Dep->Watcher->update->patch銆傛€濊€冿細Vue濡備綍鏇存柊瑙嗗浘锛屼笌nextTick鏈変粈涔堝叧绯伙紵Vue寮傛鏇存柊瑙嗗浘锛孷ue瀹炵幇浜嗕竴涓槦鍒椼€傚厛鎵ц涓荤嚎绋嬬殑浠ｇ爜锛岀瓑寰呬笅涓€涓猼ick缁熶竴鎵ц闃熷垪涓璚atcher鐨勮繍琛屻€傝繖閲岃鐨勬槸涓嬩竴涓猼ick锛屾墍浠ラ鍏堣浜嗚В浜嬩欢寰幆銆傚彲浠ュ弬鑰冨涔犲ぇ甯堝啓鐨勶細鍦ㄤ簨浠跺惊鐜殑鍚屾椂锛岀浉鍚宨d鐨刉atcher涓嶄細閲嶅鍔犲叆闃熷垪锛屾墍浠atcher杩愯涓嶄細鎵ц1000娆°€傛渶缁堟洿鏂拌鍥惧彧浼氱洿鎺ユ妸test瀵瑰簲鐨凞OM鐨?鍙樻垚1000銆備箣鎵€浠ヨ兘鍦╪extTick鍥炶皟鍑芥暟涓幏鍙栧埌鏁版嵁淇敼鍚嶥OM鐨勫彉鍖栵紝鏄洜涓哄湪nextTick鍑芥暟涓畾涔変簡timerFunc鍑芥暟.璇ュ嚱鏁板皝瑁呬簡Promise銆丮utationObserver銆乻etImmediate鍜宻etTimeout锛屽張寮€鍚簡涓€涓畯浠诲姟銆傚綋鍓嶅畯浠诲姟鎵ц瀹屾瘯鍚庯紝浼氭竻绌哄綋鍓嶅畯浠诲姟浜х敓鐨勫井浠诲姟锛坧s锛歐atcher鐨剅un宸茬粡鎵ц瀹屾瘯锛夈€傞偅涔堝湪鎴戜滑寮傛鏇存柊瑙嗗浘涔嬪悗锛坧s锛氬墠闈㈠凡缁忔洿鏂颁簡鏁版嵁锛夛紝濡傛灉鎴戜滑鎯宠幏鍙栨暟鎹慨鏀瑰悗鐨凞OM鍙樺寲锛屽氨闇€瑕佸啀鍚姩涓€涓猼ick锛屾墍浠ヤ娇鐢╪extTick浼犲叆鐨勫洖璋冨嚱鏁帮紝鍦ㄥ洖璋冨嚱鏁板彲浠ユ搷浣滃拰淇敼DOM鐨勫彉鍖栵紝浣犲彲浠ュ湪杩欓噷缂栧啓浣犵殑浠ｇ爜閫昏緫銆傝繖灏辨槸涓轰粈涔堟洿鏂版暟鎹殑dom鍏冪礌搴旇鍦╪extTick涓€備箣鎵€浠ュ湪nextTick鍑芥暟涓娇鐢ㄥ洖璋冿紝鑰屼笉鏄洿鎺ュ湪nextTick涓墽琛屽洖璋冨嚱鏁帮紝鏄负浜嗕繚璇佸湪鍚屼竴涓猼ick涓娆℃墽琛宯extTick锛屼笉浼氬惎鍔ㄥ涓紓姝ヤ换鍔★紝灏嗚繖浜涘紓姝ヤ换鍔″帇鎴愪竴涓悓姝ヤ换鍔°€傛墽琛岄€愮瑪鎶ヤ环銆傜湅鏉ュ鏋滄鏃朵笉寮傛鏇存柊瑙嗗浘锛岄偅涔堟瘡娆?+閮戒細鐩存帴鎿嶄綔DOM鏇存柊瑙嗗浘锛岄潪甯歌€楁€ц兘銆傚垵濮嬩簨浠舵満鍒禫ue.js鎻愪緵浜嗗洓绉嶄簨浠禔PI锛屽垎鍒槸$on,$once,$off,$emit銆傚垎鏋?on璁㈤槄鍑芥暟锛屼紶鍏ヤ簨浠跺悕绉帮紝cb銆備竴涓簨浠跺彲浠ヨ澶氭璁㈤槄锛屾墍浠ヤ竴涓簨浠惰cb浠ラ槦鍒楃殑褰㈠紡鏀堕泦璧锋潵銆?emit閲婃斁鍑芥暟閫氳繃瀵瑰簲鐨勪簨浠跺悕鎵ц鍒氬垰閲囬泦鍒扮殑cb鍑芥暟銆?once鍙闃呬竴娆°€傝繖閲岀殑鎬濊矾鏄娇鐢ㄥ嚱鏁板寘瑁咃細鍖呰浼犲叆鐨刢b锛岀劧鍚庤闃呭寘瑁呭嚱鏁般€傚寘瑁呭嚱鏁扮殑閫昏緫鏄厛璋冪敤cb锛屽啀鍙栨秷璁㈤槄銆傞偅涔坵rapper鍑芥暟浠€涔堟椂鍊欎細琚Е鍙戝憿锛熼偅鏄?emit鐨勬椂鍊欍€傝繕鏈変竴涓皬缁嗚妭锛氬埄鐢ㄥ嚱鏁扮殑鐗规€х粰wrapper鍑芥暟缁戝畾灞炴€э紝灏嗕紶鍏ョ殑cb缁戝畾鍒皐rapper鍑芥暟鐨勬煇涓睘鎬т笂銆傝繖鏄粈涔堟晥鏋滐紵锛坧s锛氱暀涓棶棰橈紝鍚庨潰鍐嶈锛?off鏄幓鎺変簨浠剁洃鍚€傛簮鐮佷腑鏈夊嚑绉嶆儏鍐碉細1銆佸弬鏁發enght涓?锛屾墍鏈変簨浠舵竻闆躲€?.褰撲簨浠朵互鏁扮粍鐨勫舰寮忎紶閫掓椂锛岄€掑綊鍦伴€愪釜鍏抽棴浜嬩欢銆?.纭畾浼犲叆鐨勪簨浠跺悕鍜宖n锛屼粠浜嬩欢鍚嶅搴旂殑闃熷垪涓垹闄ゃ€傝繖閲岀殑鐗规畩涔嬪鍦ㄤ簬锛屽鏋滄垜棣栧厛$once涓€涓簨浠讹紝浣嗘垜娌℃湁瑙﹀彂瀹冿紝鎴戝彧鏄?off浜嬩欢銆傛鏃跺垹闄n鏃讹紝鍒╃敤涓婅堪浣跨敤鍑芥暟鐨勭壒鎬э紝灏嗗睘鎬х粦瀹氬埌鍖呰鍑芥暟涓娿€傛兂鐫€璁㈤槄鍙戝竷锛屽彧鏈夊厛璁㈤槄鍚庢墠鑳藉彂甯冦€傚緢鏄庢樉涓嶆槸銆傚湪杩欎釜Eevnt绫讳腑锛屽疄鐜颁簡鍏堝彂甯冨悗璁㈤槄鐨勬儏鍐碉紙ps锛氭瘮濡傜绾挎帴鏀舵秷鎭級銆傚ぇ鎰忔槸鍦ㄥ彂甯冪殑鏃跺€欙紝鎴戜細鍏堟妸鍙戝竷鐨勫姛鑳芥墦鍖呮敹闆嗚捣鏉ワ紝绛夎闃呰€呰闃呭畬浜嗗啀娓呯┖銆傝繖閲岃娉ㄦ剰锛屽彂甯冭€呯殑鐢熷懡鍛ㄦ湡搴旇鏄竴娆°€傦紙ps锛氳闃呰€呭彧鑳借闃呬竴娆★級鐒跺悗璁㈤槄鍚庢妸缁撴灉缁欒闃呰€呫€傚叿浣撳疄鐜颁唬鐮佸涓嬪浜庝簨浠舵満鍒讹紝涓€鑸彲浠ョ敤鏉ラ€氫俊鍜屼紶杈撴暟鎹€傛垜鍙堟兂鍒颁簡涓€涓棶棰橈細濡備綍鍦╒ue涓疄鐜板箍鎾簨浠讹紙ps锛氬箍鎾簨浠舵槸浠巔arent閫愬眰鍚慶hild骞挎挱閫氱煡锛夊拰dispatch浜嬩欢锛堜粠child閫愬眰鍒嗗彂鍒皃arent锛夈€傚箍鎾簨浠跺拰娲惧彂浜嬩欢涔熸湁涓ょ鎯呭喌锛氭瘡灞傛淳鍙戞寚瀹氫竴涓骇鍒殑娲惧彂锛屼娇鐢ㄤ簨浠舵満鍒朵細涓洪」鐩殑鏁版嵁閫氫俊澧炴坊涓嶅悓鐨勮壊褰﹡鎬荤粨瀛︿範鏈韩灏辨槸涓€涓惊搴忔笎杩涚殑杩囩▼銆備釜浜哄涔犳柟寮忎笉鍚岋紝浣嗘垜瑙夊緱鎻愰棶鍜屽洖绛旂殑鏂瑰紡涔熸槸涓€绉嶅涔犳柟寮忥紒杩欏氨鏄负浠€涔堟垜璁や负鐪嬫簮鐮佷笉浠呬粎鏄负浜嗛潰璇曘€傚涔犳鏋堕噸鍦ㄤ竴涓猧dea锛岀煡閬撳唴閮ˋPI鐨勫疄鐜版満鍒朵篃鏄竴绉嶆敹鑾枫€傝繖娈垫椂闂寸殑婧愮爜瀛︿範绗旇锛屽笇鏈涘浣犳湁鎵€甯姪~鍙﹀鍦ㄥ涔犺繃绋嬩腑鏁寸悊浜嗕竴濂梀ue闈㈣瘯棰橈細銆愭帹鑽愭敹钘忋€?020骞村悇澶у巶鍟哣ue闈㈣瘯棰樻眹鎬伙紝鎸佺画鏇存柊涓瓇锛屾湁闇€瑕佺殑鏈嬪弸鍙互鍘荤湅鐪嬨€傚笇鏈涘ぇ瀹朵笉瑕佸悵鍟嚜宸辨墍鎷ユ湁鐨勷煈嶐煈?/p>
