vue3.0尝鲜-认识变化（二）
鑳屾櫙浠嬬粛閫氳繃涓婁竴绡噕ue3.0灏濋矞-浠嶵oDoList寮€濮嬬殑浠嬬粛锛屽彲浠ュvue3.0鐨勭畝鍗曞啓娉曟湁涓€涓垵姝ョ殑浜嗚В銆傛帴涓嬫潵鎴戞弿杩拌杈炬€荤粨鐨勬暣浣撳彉鍖栵紝浠ュ強鐩墠鎴愮啛鐨剅fcs锛堣娉曞彉鍖栵級銆傚叏闈㈡敼鍙樻€ц兘锛坧erformance锛夐噸鍐檝dom锛屾彁楂橀潤鎬佹爣璁版€ц兘缂栬瘧鏃朵紭鍖栨洿濂界殑鍒濆鍖栨€ц兘updatefasterssrspeedfaster-Tree-shakingsupport锛坱reeshakingsupport,smallerfilesize锛塩omponentsdonotneedauniquerootNodeCompositionAPInewsyntax(VueCompositionAPI锛塅ragment锛堢墖娈碉級銆乀eleport锛堜紶閫侀棬锛夈€丼uspense锛堝紓姝ョ粍浠讹級锛堟柊鐨勭粍浠舵柟娉曪級BetterTypescriptsupport锛堟洿濂藉湴鏀寔ts锛塁ustomRendererAPI锛堣嚜瀹氫箟娓叉煋鍣級ActiveRfcsslotsyntaxchangev-slot缁熶竴slot鍜屽崟涓寚浠よ娉曚腑鐨勬Ы浣滅敤鍩熴€倂-slot缂╁啓涓?锛屽彲浠ョ粺涓€浣滅敤鍩熸Ы鍜屽崱妲界殑浣跨敤銆傚垹闄や簡class缁勪欢锛屽垹闄や簡filter鍜宨nlinetemplate锛屽彇娑堜簡v-on鐨刱eyCode(@keyup.enter)鎸囦护//鍔ㄦ€佽緭鍏ュ懡浠ゅ悕
//import{h,resolveComponent,resolveDirective,withDirectives}from'vue'exportdefault{render(){constcomp=resolveComponent('some-global-comp')constfooDir=resolveDirective('foo')constbarDir=resolveDirective('bar')//
returnwithDirectives(h(comp),[fooDir,this.x],[barDir,this.y])}}涓轰簡杩愯tree-shaking锛岄€氳繃鍏ㄥ眬瀵煎叆瀵煎嚭api//姣斿import{nextTick,h,}from'vue'鍒犻櫎v-bind.sync锛屾敼鐢╲-model涓昏鏄洜涓簐-bind.sync鍜寁-model鍔熻兘鐩稿悓锛屼娇鐢ㄦ椂浼氶€犳垚娣锋穯銆倂ue3涓細妫€娴媣-bind.sync骞舵姤璀﹀憡锛屾柊鐨勮縼绉诲姪鎵嬫娴嬪苟鑷姩淇100%浣跨敤v-bind鍜?sync鐨勬儏鍐靛姛鑳界粍浠跺繀椤荤Щ闄functional:true}forfunctions
涓嶅啀鏀寔//鐩告瘮2.X//鍙娇鐢╬rops鍜宻lot锛坉ata鍜宑hildre閮芥病鏈変簡锛?/鏂扮殑apiinjectusedinsteadofinjections//parent琚垹闄わ紝props鍜宻lot娉ㄥ叆鏄閫?/listeners灏嗗寘鍚湪attrs灞炴€т腑h('div',`Usingdemo${demoCom}`)}蹇呴』浣跨敤defineAsyncComponent鍒涘缓寮傛缁勪欢import{defineAsyncComponent}from'vue'constAsyncComp=defineAsyncComponent(()=>import('./Foo.vue'))瀵瑰叏灞€api鐨勬敼鍙樺皢鏀瑰彉Vue琛屼负鐨勫叏灞€API绉诲埌鏂扮殑apicreateApp鏂规硶鍒涘缓鐨勫簲鐢ㄧ▼搴忓疄渚嬩腑锛屽畠浠彧浣滅敤浜巃pp瀹炰緥锛屼笉鏀瑰彉Vue琛屼负鐨刧loablAPI鏄€氳繃import浣跨敤锛岃绗?鐐箁ender鍑芥暟鏀筯浣跨敤import浠巚ue寮曠敤锛岃绗簲鐐箁ender鍑芥暟鐨勪紶鍊硷紝浼氬拰functional缁勪欢淇濇寔涓€鑷达紝瑙佺7鐐筽rops锛寋slots,attrs,emit}vNodes鎴愪负骞抽潰鏁版嵁缁撴瀯exportdefault{render(){returnh('div',//previously//{//domProps:{innerHTML:''},//on:{click:foo},//key:'foo',//class:['foo','bar'],//style:{color:'red'},//attrs:{id:'foo'},//},//骞抽潰鏁版嵁缁撴瀯{innerHTML:'',id:'app',onClick:clickFn,key:'foo',class:['foo','bar'],style:{color:'red'}},[h('span','world')])}}CompositionAPI鐩墠姝ｅ湪鏀筧pi锛岃璇寸殑涓滆タ澶浜嗭紝澶ф鏄渶鍚庢柊澧炵殑ref,reactive,watchEffecttimeWaitingforapitransitionchanges褰撲粠澶栭儴鍒囨崲缁勪欢鏃讹紝浣跨敤浣滀负缁勪欢鐨勬牴灏嗕笉鍐嶈Е鍙戣繃娓＄被鏇存敼v-enter-from鏇挎崲v-enterv-leave-from鏇挎崲v-leavev-appear-from鏇挎崲v-appearDelete$on,$off,$once鍦╲ue2.0涓彲浠ヤ娇鐢ㄥ０鏄庡紡鐨?emit瑙﹀彂鐖剁粍浠朵腑鐨勬柟娉曪紝涔熷彲浠ヤ娇鐢ㄥ懡浠ゅ紡鐨?on,$off,$once瀹炵幇瀹冦€傝涓烘槸閲嶈浇锛屼篃璁や负涓嶉渶瑕佹毚闇茬粍浠跺疄渚嬪睘鎬х殑寮哄埗琛屼负锛屽垹闄ゆ灇涓惧睘鎬х殑鍐呴儴姒傚康锛屽皢杩欎簺灞炴€у綋浣滄櫘閫氱殑闈炲竷灏斿睘鎬с€傚綋鍊间负甯冨皵鍊兼椂锛屼笉鍐嶅垹闄ゅ睘鎬с€傜浉鍙嶏紝瀹冭璁剧疆涓篴ttr="false"銆傝鍒犻櫎姝ゅ睘鎬э紝璇蜂娇鐢╪ull鎴杣ndefined銆?/vue2.0涓殑鍘熻瘽//濡傛灉isButtonDisabled鐨勫€间负null銆乽ndefined鎴杅alse锛宒isabled灞炴€х敋鑷充笉浼氬寘鍚湪娓叉煋鐨?button>鍏冪礌涓?buttonv-bind:disabled="isButtonDisabled">Buttonvue2.0灞炴€у湴鍧€鎻愪緵鑷畾涔塁SS鎵╁睍寮冪敤鍗曟枃浠剁粍浠舵牱寮?>>鍜?deep///浣跨敤杩欎釜::v-deep(.bar){}鏂颁吉绫籩ffect鍩熺粍浠剁殑鍏ㄥ眬鏍峰紡blocks::v-global(.foo){}褰撳墠锛屼粠鐖惰妭鐐逛紶鍏ョ殑妲藉唴瀹瑰彈鐖惰妭鐐瑰拰瀛愯妭鐐规牱寮忕殑褰卞搷銆傛棤娉曟樉寮忓垱寤洪拡瀵规彃妲藉唴瀹圭殑鏍峰紡锛屾垨鑰呬笉褰卞搷鎻掓Ы鍐呭鐨勬牱寮忋€俈ue3.0澧炲姞浜?:v-slotted()::v-slotted(.foo){}TeleportPortal锛堣瑙佷笂涓€绡囨枃绔狅級璺敱澧炲姞浜嗗緢澶氭柊鐨凙PI锛屼絾鏄粏鑺傚お澶氫簡锛屾垜绋嶅悗灏嗘坊鍔犺缁嗕俊鎭€傛渶鍚庯紝绠€瑕佸垪鍑哄綋鍓嶇殑鏇存敼銆俈ue3銆傛洿澶氬紑鍙戣€呴渶瑕佺殑API锛屽唴閮ㄨ娉曡皟鏁达紝鎬ц兘浼樺寲銆傚敖閲忚创鍚堜箣鍓嶇殑寮€鍙戜範鎯紝闄嶄綆鍗囩骇鎴愭湰銆傛墍浠ュぇ瀹朵笉鐢ㄧ潃鎬ワ紝鍙互鎰夊揩鐨勬帴鍙?.0銆傚枩娆㈢殑璇濆彲浠ョ偣涓禐鏀惰棌涓嬶紝浠ュ悗鏇存柊鍝︷煒?/p>
