澶у濂斤紝鎴戞槸灏忚彍銆備竴涓笇鏈涙垚涓哄惞鐗沊鐨勭敺浜猴紝璋堝缓绛戯紒濡傛灉浣犱篃鎯虫垚涓烘垜鎯虫垚涓虹殑浜猴紝鎴栬€呰窡鐫€鎴戝仛浼达紝璁╁皬鑿滀笉鍐嶅鍗曪紒鏈枃涓昏浠嬬粛Vue鐨勪粙缁嶃€傚鏋滈渶瑕侊紝鍙互鍙傝€冦€傚鏋滆寰楁湁甯姪锛屽埆蹇樹簡鐐逛釜璧炰笂涓€绡囨垜浠粙缁嶄簡webpack鐨勫熀鏈娇鐢紝鐩稿綋浜庝负鎺ヤ笅鏉ョ殑Vue鍋氶摵鍨紒杩樻病鏈夌湅杩囩殑灏忎紮浼磋寰楄烦妲芥壘鑼摝~锛佷粠鍚庣鐨勭溂鍏夊Webpack锛屾枃姝﹀弻鍏紵Vue鐭ラ亾浠€涔堟槸Vue锛屼竴涓敤浜庢瀯寤虹敤鎴风晫闈㈢殑娓愯繘寮忔鏋躲€傚湪绠€鍗曠殑浠嬬粛涓紝鎴戜滑闇€瑕侀噸鐐圭悊瑙ｄ袱涓瘝锛氭瀯寤虹敤鎴风晫闈㈠拰娓愯繘寮忔鏋躲€傚叾鐗圭偣浣撶幇鍦ㄤ袱涓柟闈€傛暟鎹┍鍔ㄨ鍥句娇鐢╲ue椤甸潰銆俈ue浼氳嚜鍔ㄧ洃鍚暟鎹彉鍖栵紝鑷娓叉煋椤甸潰缁撴瀯銆傚湪vue涓紝涓嶉渶瑕佹墜鍔ㄦ搷浣淒OM鑺傜偣銆傚畠浼氶€氳繃涓€浜涚壒娈婄殑HTML璇硶鏉ョ粦瀹欴OM鍜屾暟鎹€傚垱寤虹粦瀹氬悗锛孌OM灏嗕笌鏁版嵁淇濇寔鍚屾銆傛瘡褰撴暟鎹彂鐢熷彉鍖栨椂锛孌OM涔熶細鍋氬嚭鐩稿簲鐨勫搷搴斻€傛洿鏂板弻鍚戞暟鎹粦瀹氫笂闈㈡彁鍒扮殑鏁版嵁椹卞姩鏄崟鍚戠粦瀹氾紝浣嗘槸Vue涔熸敮鎸佸弻鍚戠粦瀹氱殑鐗规€с€傚綋椤甸潰缁撴瀯鐨勬暟鎹彂鐢熸椂锛屾棤闇€鎿嶄綔DOM灏卞彲浠ヨ嚜鍔ㄨ浆鎹㈤〉闈€備俊鎭悓姝ュ埌vue鏁版嵁銆侻VVM妯″瀷涓婇潰璇村埌鐨勪袱涓獀ue鐗规€х殑鏍稿績鍘熺悊鏄疢VVMM:Model锛岃〃绀哄綋鍓嶉〉闈㈡覆鏌撲緷璧栫殑鏁版嵁婧怴:View锛岃〃绀哄綋鍓嶉〉闈㈡覆鏌撶殑DOM缁撴瀯VM:ViewModel锛岃〃绀簐ue鐨勫疄渚嬶紝涔熷氨鏄疢VVM鐨勬牳蹇冮€氳繃涓婂浘锛屾垜浠瑙ｄ簡MVVM鐨勫伐浣滃師鐞嗐€俈iewModel浣滀负MVVM鐨勬牳蹇冿紝鐩稿綋浜庝竴涓繛鎺ョ殑妗ユ锛屼袱绔€氳繃Model锛堟暟鎹簮锛夊拰View锛堥〉闈㈢粨鏋勶級杩炴帴璧锋潵銆傚叾涓璙iew鏄湪娴忚鍣ㄤ笂鍙互鐪嬪埌鐨勭粨鏋勶紝Model閫氬父鏄寚閫氳繃Api璋冪敤寰楀埌鐨勬暟鎹€傚綋鏁版嵁婧愬彂鐢熷彉鍖栨椂锛屼細琚玍iewModel鐩戝惉锛岄〉闈㈢殑缁撴瀯浼氭牴鎹渶鏂扮殑鏁版嵁婧愯嚜鍔ㄦ洿鏂般€傚綋椤甸潰鍏冪礌鐨勫€煎彂鐢熷彉鍖栨椂锛屼篃浼氳ViewModel鐩戝惉锛屾洿鏂板彉鍖栧悗鐨勬渶鏂板€笺€傚悓姝ュ埌Model鏁版嵁婧愯繖鏄竴涓潪甯哥畝鍗曠殑Vue渚嬪瓙锛屼絾鏄畠宸茬粡鍖呭惈浜哣iew-ViewModel-Model涓夐儴鍒嗙粨鏋勩€傚熀鏈娇鐢ㄢ厾锛庢寚浠よ鎴戜滑棣栧厛浜嗚В浠€涔堟槸鎸囦护銆傛寚浠ゆ槸vue涓哄紑鍙戣€呮彁渚涚殑妯℃澘璇硶锛岃緟鍔╁紑鍙戣€呮覆鏌撻〉闈㈢殑鍩烘湰缁撴瀯銆倂ue涓殑鎸囦护鏍规嵁鐢ㄩ€旂殑涓嶅悓鍒嗕负6绫伙紝濡備笅锛?锛夊唴瀹规覆鏌撴寚浠ゅ唴瀹规覆鏌撴寚浠ょ敤浜庢覆鏌揇OM鍏冪礌涓殑鏂囨湰鍐呭銆?銆乿-text鐨勪袱涓猦1鏍囩锛屼竴涓湁榛樿鍊硷紝涓€涓病鏈夐粯璁ゅ€硷紝鎴戜滑浣跨敤浜唙-text鍛戒护锛岀粨鏋滃枩浜猴紝v-text濡傛効鐢熸晥锛屼絾鏄繕鏈変笉瀵癸紝绗簩涓猦1鏈夎嚜宸辩殑榛樿鍊硷紝浣嗘槸琚玽-text鎸囦护浠ｆ浛浜嗭紝杩欏氨鎴愪簡v-text鐨勭己鐐箏锛乿-text鎸囦护灏嗚鐩栧厓绱犱腑鐨勯粯璁ゅ€納{}}銆傝繖鏄痸ue鎻愪緵鐨勮娉曪紝涓撻棬鐢ㄦ潵瑙ｅ喅v-text瑕嗙洊榛樿鏂囨湰鍐呭鍊肩殑闂銆傝繖绉峽{}}璇硶鐨勪笓涓氬悕绉扮О涓烘彃鍊艰〃杈惧紡銆備笅闈㈡槸瀹冪殑浣跨敤鏂规硶锛氭垜浠彲浠ヤ娇鐢ㄧ畝鍗曠殑璇硶{{valuekey}}鏉ヨ幏鍙栨暟鎹簮鐨勫€硷紝鑰屼笉浼氬共鎵版爣绛句腑鐨勫師濮嬪€笺€傚洜姝わ紝鎻掑€艰〃杈惧紡鍦ㄦ垜浠殑鏃ュ父寮€鍙戜腑浼氭洿鍔犲父鐢ㄣ€傚悓鏃朵篃鏀寔鍦ㄦ寚浠や腑浣跨敤绠€鍗曠殑JavaScript璇硶锛氫絾鏄鏋滄暟鎹簮涓殑鏌愪釜鍊间笉鏄父瑙勬剰涔変笂鐨勫€硷紝鑰屾槸涓€涓猦tml鐗囨锛岄€氳繃{{}鏄惁鍙互鎴愬姛璇嗗埆娓叉煋}?涓嶅垢鐨勬槸锛屾彃鍊艰〃杈惧紡骞舵病鏈夊府鍔╂垜浠覆鏌揾tml鐗囨锛岄偅涔堣繖鏃跺€欐垜浠鎬庝箞鍔炲憿锛熶綘闇€瑕佷娇鐢ㄦ垜浠帴涓嬫潵瑕佽鐨勬寚浠锛乿-html杩欎釜鍛戒护涓€鐪嬪氨鍜宧tml鏈夊叧锛屽洜涓簐-text鍜屾彃鍊艰〃杈惧紡鍙兘甯姪鎴戜滑娓叉煋绾枃鏈唴瀹广€傚鏋滆灏嗗寘鍚獺TML鏍囩鐨勫瓧绗︿覆娓叉煋涓洪〉闈TML鍏冪礌锛屽氨闇€瑕佺敤鍒拌繖涓獀-html鎸囦护2锛夊睘鎬х粦瀹氭寚浠-bind濡傛灉闇€瑕佷负鍏冪礌鐨勫睘鎬у姩鎬佺粦瀹氬€硷紝鎴戜滑闇€瑕佷娇鐢╲-bind灞炴€х粦瀹氭寚浠ょ敱浜巚-bind鍦ㄦ棩甯稿紑鍙戜腑鐨勪娇鐢ㄩ潪甯搁绻侊紝Vue瀹樻柟鎻愪緵浜嗕竴绉嶇畝鍐欏舰寮忥紙鑻辨枃绗﹀彿锛氾級锛屽苟涓攙-bind涓篃鏀寔绠€鍗曠殑JS璇硶3锛変簨浠剁粦瀹氭寚浠ue涔熸彁渚泇-on浜嬩欢缁戝畾鎸囦护锛岀敤浜庝负DOM闃舵缁戝畾浜嬩欢鐩戝惉銆傜畝鍗曡娉曞涓嬨€傛垜浠湪data涓畾涔夋暟鎹簮锛屽湪methods涓畾涔夋柟娉曪紝閫氳繃v-on鎸囦护缁戝畾浜嬩欢銆傛暣浣撶粨鏋勬竻鏅版槑浜嗐€傚綋鐒讹紝闄や簡onclick浜嬩欢锛屾垜浠繕鍙互浣跨敤oninput銆乷nkeyup绛夊師鐢熶簨浠躲€備篃鍥犱负v-on鎸囦护鍦ㄥ紑鍙戜腑浣跨敤闈炲父棰戠箒锛屾墍浠ue瀹樻柟涔熸彁渚涗簡鎴戜滑涓婇潰鎻愬埌鐨勭缉鍐欙紙@锛夊弬鏁癳鍑虹幇鍦ㄦ柟娉曞嚱鏁颁腑銆備笉鐭ラ亾缁嗗績鐨勬湅鍙嬫湁娌℃湁娉ㄦ剰鍒皛鍦ㄥ師鐢烡OM浜嬩欢缁戝畾涓紝浜嬩欢澶勭悊鍑芥暟鐨勫舰鍙傚鍙互鎺ユ敹鍒颁簨浠跺弬鏁板璞vent銆傚悓鏍凤紝鍦╲-on鎸囦护缁戝畾鐨勪簨浠跺鐞嗗嚱鏁颁腑锛屾垜浠篃鍙互閫氳繃涓婅堪鏂规硶鑾峰彇浜嬩欢鍙傛暟瀵硅薄event銆傝繖鏃跺€欏鏋滆皟鐢ㄥ嚱鏁版病鏈夊舰鍙傝繕濂斤紝浣嗘槸鏈変簡褰㈠弬鍙堣濡備綍瑙ｅ喅鍛紵鎴戜滑鍏堣瘯璇曪紝鍙戠幇杩欎釜鏂规硶涓嶈锛屾垜浠殑浜嬩欢鍙傛暟瀵硅薄琚鐩栦簡锛侀偅涔堝彲浠ヨvue涓烘垜浠彁渚涗簡涓€涓壒娈婄殑鍙橀噺$event锛岀敤鏉ヨ〃绀哄師鐢熶簨浠跺弬鏁板璞vent銆?event鍙互瑙ｅ喅浜嬩欢鍙傛暟瀵硅薄event琚鐩栫殑闂銆傚彲瑙佽繖涓壒娈婂彉閲忓凡缁忚В鍐充簡鎴戜滑涓婇潰閬囧埌鐨勯棶棰橈紒(1)浜嬩欢淇グ绗﹀湪DOM浜嬩欢涓紝鏈変竴涓粡鍏哥殑闂锛屽氨鏄簨浠跺啋娉°€備粈涔堟槸浜嬩欢鍐掓场锛熸垜浠В鍐宠繖涓棶棰樹篃寰堢畝鍗曘€傛垜浠彲浠ヤ娇鐢ㄤ笂闈㈡彁鍒扮殑浜嬩欢瀵硅薄鏉ラ槻姝㈠啋娉¤涓猴細浜嬩欢鍐掓场闂鍙互閫氳繃鍑芥暟stopPropagation()鏉ヨВ鍐筹紝浣嗘槸Vue鎻愪緵浜嗘洿浼橀泤鐨勮В鍐虫柟妗垀杩欑鏂瑰紡鍦╲ue涓绉颁负浜嬩欢淇グ绗︼紝鍗崇敤鏉ユ洿鏂逛究鐨勬帶鍒朵簨浠剁殑瑙﹀彂銆備笅闈㈡垜浠垪鍑轰簡5绉嶅父瑙佺殑浜嬩欢淇グ绗︼細浜嬩欢淇グ绗escription.prevent闃叉榛樿琛屼负锛堜緥濡傦細鏍囩鐨勮烦杞€佽〃鍗曟彁浜ょ瓑锛夈€俿top闃叉浜嬩欢鍐掓场銆俢apture鍦ㄦ崟鑾锋ā寮忎笅瑙﹀彂褰撳墠浜嬩欢澶勭悊绋嬪簭銆俹nce缁戝畾浜嬩欢鍙Е鍙戜竴娆°€俿elf浠呭湪event.target鏄綋鍓嶅厓绱犳湰韬椂瑙﹀彂浜嬩欢澶勭悊绋嬪簭銆傜敤娉曢兘鏄€氳繃@click銆俷ame(ii)keymodifiers鎴戜滑鍦ㄧ洃鍚敭鐩樹簨浠剁殑鏃跺€欙紝寰€寰€闇€瑕佸垽鏂缁嗙殑鎸夐敭瀵瑰簲涓嶅悓鐨勬寜閿姩浣滆涓恒€傚綋鐒秜ue涓敭鐩樼浉鍏崇殑浜嬩欢涔熷姞鍏ヤ簡鎸夐敭淇グ绗︼紝姣斿鐩戝惉enter閿細锛堝叾浠栭敭鍙互鏍规嵁闇€瑕佹浛鎹nter鍚嶇О锛?锛夊弻鍚戠粦瀹氳鏄庢垜浠凡缁忕煡閬搗-bind/v-text/v-html/{{}}绛夋寚浠わ紝浣嗚繖浜涢兘鏄崟鍚戠粦瀹氭寚浠わ紝椤甸潰鍏冪礌鍙互浠庢暟鎹簮鑾峰彇鏁版嵁锛屼絾鏁版嵁婧愭棤娉曚粠椤甸潰鍏冪礌鑾峰彇鏁版嵁銆傛墍浠ワ紝鎴戜滑璇寸殑鏄痸ue鎻愪緵鐨剉-model鍙屽悜缁戝畾鎸囦护~锛佸弻鍚戠粦瀹氭寚浠ょ殑濂藉鏄笉闇€瑕佹搷浣淒OM鍏冪礌灏卞彲浠ュ揩閫熻幏鍙栬〃鍗曠殑鏁版嵁銆傛垜浠彲浠ユ敼鍙榠nput杈撳叆妗嗕腑username鐨勫€硷紝鐩稿簲鐨勶紝椤甸潰涓妠{username}}鐨勫€间篃浼氭敼鍙榽锛佸綋鎴戜滑浣跨敤鍙屽悜缁戝畾澶勭悊鏃讹紝涓轰簡鍑忓皯涓€浜涗笉蹇呰鐨勫啑浣欐搷浣滐紝姣斿trim锛屾暟瀛楄浆鎹⑩€︹€︼紝Vue涔熶负鎴戜滑鎻愪緵浜嗙浉搴旂殑澶勭悊淇グ绗︼細淇グ绗︽弿杩般€俷umber鑷姩灏嗙敤鎴疯緭鍏ョ殑鍊艰浆鎹负鏁板瓧绫诲瀷銆倀rim鑷姩杩囨护鐢ㄦ埛杈撳叆鐨勭粨鏉熺┖鐧藉瓧绗︺€俵azy鍦ㄢ€渃hange鈥濅笉鏄€渋nput鈥濇椂鏇存柊5锛夋潯浠舵覆鏌撴寚浠ゆ潯浠舵覆鏌撴寚浠ょ敤浜庢帶鍒禗OM鑺傜偣鐨勬樉绀哄拰闅愯棌v-ifv-show鐨勪互涓婁袱鏉℃寚浠ゆ槸鏉′欢娓叉煋鎸囦护銆傚畠浠殑鐢ㄦ硶濡備笅锛氬綋鏉′欢婊¤冻鏃讹紝涓よ€呴兘浼氭甯告樉绀恒€備笉婊¤冻鏉′欢鐨勬椂鍊欙紝鎴戜滑鐪嬩竴涓嬩袱鑰呯殑鍖哄埆锛氭垜浠彲浠ラ€氳繃F12鎺у埗鍙版煡鐪嬮〉闈㈠厓绱狅紝鍙戠幇椤甸潰鍏冪礌灏戜簡v-if淇グ鐨剆pan鍏冪礌锛屾墍浠ュ緱鍑虹粨璁猴細v-if鎸囦护浼氬湪瀹炵幇鍘熺悊灞傞潰鍔ㄦ€佸垱寤烘垨绉婚櫎DOM鍏冪礌锛屼粠鑰屾帶鍒堕〉闈笂鍏冪礌鐨勫瓨鍦╯how鎴杊idev-show鍛戒护浼氬姩鎬佹坊鍔犳垨绉婚櫎style='display:none;'鍏冪礌鐨勬牱寮忥紝浠ユ帶鍒跺厓绱犲湪椤甸潰涓婄殑鏄剧ず鎴栭殣钘忋€倂-if鐨勬€ц兘娑堣€楃骇鍒湁鏇撮珮鐨勫垏鎹㈠紑閿€锛岃€寁-show鏈夋洿楂樼殑鍒濆娓叉煋寮€閿€濡傛灉闇€瑕侀绻佸垏鎹娇鐢╲-show濡傛灉杩愯鏃舵潯浠跺緢灏戝彉鍖栦娇鐢╲-if鏈塿-if鏍囩锛岃嚜鐒秜-else-if鍜寁-elsetag~6锛夊湪鍒楄〃娓叉煋鎸囦护涔嬪墠锛屾垜浠粦瀹氬崟鍊煎厓绱犮€傚綋鎴戜滑閬囧埌鏁扮粍鍏冪礌鏃讹紝鎴戜滑涓嶅緱涓嶄娇鐢╲ue鎻愪緵鐨剉-for鏍囩銆傛鏍囪鐢ㄤ簬杩唬鍦板憟鐜板熀浜庢暟缁勭殑鍒楄〃缁撴瀯銆倂-for鎸囦护闇€瑕佷娇鐢╥teminitems褰㈠紡鐨勭壒娈婅娉昳tem锛氬緟寰幆鏁扮粍item锛氶櫎浜唅teminitems鐨勮娉曞锛屾瘡涓緟寰幆鐨刬tem杩樻敮鎸乮ndex浣滀负绱㈠紩鐨勮緭鍏ndex->(item,index)initems鎸囦护閫氬父浼氬尮閰嶄竴涓猭ey鎸囦护锛歬ey锛屽湪vue涓敤浜庣淮鎶ゅ垪琛ㄧ殑鐘舵€併€傚綋鍒楄〃鐨勬暟鎹彂鐢熷彉鍖栨椂锛岄粯璁ゆ儏鍐典笅vue浼氬敖鍙兘閲嶇敤宸叉湁鐨凞OM鍏冪礌锛屼粠鑰屾彁楂樻覆鏌撴晥鐜囥€侾erformance锛屼絾鏄繖绉嶉粯璁ょ殑鎬ц兘浼樺寲绛栫暐浼氬鑷磗tatefullist鏃犳硶姝ｇ‘鏇存柊銆備负浜嗙粰vue涓€涓彁绀猴紝浣垮叾鑳藉璺熻釜姣忎釜鑺傜偣鐨勮韩浠斤紝浠庤€屽湪淇濊瘉statefullist姝ｇ‘鏇存柊鐨勫墠鎻愪笅鎻愰珮娓叉煋鎬ц兘銆傛鏃讹紝鎮ㄩ渶瑕佷负姣忎釜椤圭洰鎻愪緵涓€涓敮涓€鐨勫叧閿睘鎬э紒鍏充簬閿紝鎴戜滑闇€瑕佹敞鎰忎互涓嬪嚑鐐癸細閿殑鍊煎彧鑳芥槸瀛楃涓叉垨鑰呮暟瀛楅敭鍊煎繀椤绘槸鍞竴鐨勶紙閫氬父鍙朓D锛変娇鐢ㄧ储寮曚綔涓虹储寮曟病鏈変换浣曟剰涔塳ey鐨勫€硷紙绱㈠紩鐨勫€间笉鍞竴锛夊缓璁娇鐢╲-for鍛戒护锛屽洜涓虹敤鎴峰繀椤绘寚瀹歬ey鐨勫€糏I.杩囨护鍣ㄦ垜浠笂闈㈣瀹屼簡vue涓殑鍏鍛戒护锛屾帴涓嬫潵缁х画璁瞯ue涓殑杩囨护鍣紙Filters锛夈€傝繃婊ゅ櫒甯哥敤浜庢枃鏈牸寮忓寲锛屽彲浠ラ€氳繃浠ヤ笅鏂瑰紡鍦ㄦ彃鍊艰〃杈惧紡{{}}鍜寁-bind涓娇鐢細鎴戜滑浣跨敤|浣滀负璋冪敤杩囨护鍣ㄦ柟娉曠殑绠￠亾绗﹀彿銆傚叾涓紝filter鏂规硶鍐欏湪filters鑺傜偣涓嬨€傝繖涓敤娉曞彲浠ヨ仈鎯冲埌Linux鐨勭閬撶鎿嶄綔锛孞ava8涓殑stream.map鎿嶄綔銆傛垜浠笂闈㈠畾涔夌殑杩囨护鍣ㄦ槸绉佹湁杩囨护鍣ㄣ€備粈涔堟槸绉佷汉鐨勶紵鍗宠繖涓繃婊ゅ櫒鍙兘鍦ㄥ綋鍓峷m瀹炰緥鎺у埗鐨別l鍖哄煙浣跨敤銆傚鏋滄兂鍦ㄥ涓獀m瀹炰緥涔嬮棿鍏变韩filter锛岄渶瑕佸畾涔変竴涓叏灞€鐨刦ilter~锛佽€屼笖filter涔熸敮鎸佽繛缁娆¤皟鐢紝鍚屾椂filter涔熸敮鎸佷紶鍙傘€傛敞鎰忥細杩囨护鍣ㄥ彧鍦╲ue2.x鍜?.x涓敮鎸侊紝鍦╲ue3.x涓Щ闄や簡杩囨护鍣ㄧ浉鍏崇殑鍔熻兘銆備笁銆佺洃鍚櫒浠€涔堟槸鐩戝惉鍣紵watchlistener鍙互鐢ㄦ潵鐩戝惉鏁版嵁鐨勫彉鍖栵紝浠庤€屽鏁版嵁鐨勫彉鍖栧仛鍑哄叿浣撶殑鍔ㄤ綔锛佷笅闈㈡槸涓€涓畝鍗曠殑浣跨敤绀轰緥锛氭垜浠彲浠ラ€氳繃鐩戝惉data.xml涓殑鏁版嵁婧恥sername鏉ヨ幏鍙杣sername鐨勬渶鏂板€笺€傝繖涓柟娉曚篃缁忓父鐢ㄦ潵鍒ゆ柇鍙傛暟鍊兼槸鍚﹀彲鐢紝蹇€熷弽棣堢粰鐢ㄦ埛鎻愮ず~锛佷娇鐢ㄧ洃鍚櫒鏈夊嚑鐐归渶瑕佹敞鎰忋€傛墍鏈変睛鍚櫒閮藉簲瀹氫箟鍦ㄧ洃瑙嗚妭鐐逛笅銆傜洃鍚櫒鏈川涓婃槸涓€涓嚱鏁般€傜洃鍚摢浜涙暟鎹彂鐢熷彉鍖栵紝鍙渶瑕佷娇鐢ㄥ搴旀暟鎹殑鍚嶇О浣滀负鏂规硶鍚嶅嵆鍙?i)immediatein榛樿鎯呭喌涓嬶紝缁勪欢鍦ㄥ垵濮嬪姞杞藉悗涓嶄細璋冪敤watchlistener锛屽鏋滃笇鏈涚珛鍗宠皟鐢╳atchlistener锛屾偍闇€瑕佷娇鐢ㄧ珛鍗抽€夐」銆傜畝鑰岃█涔嬶紝immediate鐨勪綔鐢ㄥ氨鏄細鎺у埗鐩戝惉鍣ㄦ槸鍚﹁嚜鍔ㄨЕ鍙戜竴娆★紒浣跨敤鏂规硶濡備笅锛氬叾涓環andler()鏄浐瀹氱殑鍐欐硶锛屽綋鐩戝惉鍊煎彂鐢熷彉鍖栨椂锛屼細鑷姩璋冪敤handler鍑芥暟銆俰mmediate琛ㄧず椤甸潰娓叉煋瀹屾垚鍚庯紝绔嬪嵆瑙﹀彂褰撳墠鐨剋atchlistener銆傝繖鏃跺€欏湪鎺у埗鍙板氨鍙互鎵惧埌浜嗐€傜涓€娆＄粦瀹氬€兼椂锛岀洃鍚櫒宸茬粡琚Е鍙戙€?2)deep褰撴垜浠洃鍚殑鍊煎彉涓轰竴涓璞℃椂锛屾槸鍚﹀彲浠ヤ娇鐢ㄤ笂闈㈢殑鍐欐硶鏉ョ洃鍚瀵硅薄鐨勫睘鎬у€肩殑鍙樺寲鍛紵閫氳繃鎺у埗鍙版垜浠彂鐜帮紝闄や簡绗竴娆＄洃鍚锛屽悗闈㈢殑鏀瑰姩閮芥病鏈夎Е鍙戠洃鍚紒杩欐椂鍊欏氨闇€瑕佺敤鍒版垜浠殑deep灞炴€т簡锛氶€氳繃鍔犱笂deep:true娉ㄨВ锛屾垜浠氨鎴愬姛鐩戝惉鍒颁簡瀵硅薄灞炴€х殑鍙樺寲銆傚鏋滄垜浠浣跨敤绠€鍐欑洃鍚櫒锛岄渶瑕佽繖鏍峰啓锛氭敞鎰忥細濡傛灉瑕佺洃鍚殑鏄璞″瓙灞炴€х殑鍙樺寲锛岄偅涔堝繀椤荤敤涓€灞傚崟寮曞彿鍖呰９璧锋潵鈪ｏ紝computedproperties鐪嬪畬浜唋istener鐨勪娇鐢紝鎴戜滑灏辫秮鐫€鐏紝鍛竳瓒佺儹鎵撻搧瀛︿範vue涓殑computedproperties锛佷粈涔堟槸璁＄畻灞炴€э紵璁＄畻灞炴€ф槸鎸囩粡杩囦竴绯诲垪鎿嶄綔锛屾渶缁堝緱鍒颁竴涓睘鎬у€笺€傝繖涓姩鎬佽绠楃殑灞炴€у€煎彲浠ョ敱妯℃澘缁撴瀯鎴栨柟娉曚娇鐢ㄣ€備竴涓畝鍗曠殑渚嬪瓙濡備笅锛氳绠楀睘鎬ф湰韬殑浣跨敤骞朵笉澶嶆潅锛屾垜浠渶瑕佷簡瑙ｅ叾涓殑鍑犱釜鐗规€ц绠楀睘鎬ц櫧鐒跺湪澹版槑鐨勬椂鍊欏畾涔変负鏂规硶锛屼絾鏄绠楀睘鎬х殑鏈川鏄竴涓睘鎬с€備娇鐢ㄦ椂锛屽彲浣滀负鏅€氬睘鎬т娇鐢ㄣ€傝绠楀睘鎬у皢缂撳瓨璁＄畻缁撴灉銆傚彧鏈夊綋璁＄畻灞炴€ф墍渚濊禆鐨勬暟鎹彂鐢熷彉鍖栨椂锛屾墠浼氶噸鏂拌绠椻叅銆傜患涓婃墍杩帮紝鏈枃绠€鍗曚粙缁嶄簡Vue.js鐨勫熀鏈敤娉曘€傚綋鐒讹紝瑕佺簿閫歏ue杩樻湁寰堥暱鐨勮矾瑕佽蛋锛屼互鍚嶸ue鐩稿叧鐨勬枃绔犱細鎸佺画鏇存柊锛佷笉璇寸┖璇濓紝涓嶅伔鎳掞紝鍜屽皬鑿滀竴璧峰仛涓€涓惞鍢榅鏋舵瀯鐨勭▼搴忓憳鍚鍏虫敞鎴戝仛浼达紝璁╁皬鑿滀笉鍐嶅鍗曘€備笅闈㈣锛佷粖澶╀綘鍔姏涓€鐐癸紝鏄庡ぉ姹備汉鐨勫彛姘斿氨灏戜竴鐐癸紒鎴戞槸灏忚彍锛屼竴涓拰浣犱竴璧峰彉寮虹殑鐢蜂汉銆傪煉嬪井淇″叕浼楀彿宸插紑閫氾紝灏忚彍涓ら泦锛岃繕娌℃湁鍏虫敞鐨勫悓瀛﹁寰楀叧娉ㄥ摝锛?/p>
