Vue4

p{color:v-bind('theme.color')}Vue3Vue3鍑烘潵鏈変竴娈垫椂闂翠簡锛屽叧娉?寰堜箙浜嗐€備技涔庡彂鐢熶簡寰堝鍙樺寲銆備綔涓轰竴涓娇鐢╒ue妗嗘灦鐨勫墠绔紝涓€瀹氳鐔熸倝瀹凁煒嬨€俈ue3鏂扮壒鎬?.SFC:CompositionApi(setup)setup鎻愪緵浜嗕竴绯诲垪鍙互鍦ㄥ叾鍑芥暟鍐呴儴浣跨敤鐨凙PI锛屼粠鑰屽彲浠ュ緢濂藉湴鍒掑垎涓氬姟閫昏緫銆俿etupimprovementp{color:v-bind('theme.color')}鐢熷懡鍛ㄦ湡浠巄eforeMounted寮€濮嬪埌unmounted锛屽墠缂€on涓虹敓鍛藉懆鏈熷嚱鏁般€備娇鐢ㄦ椂锛岃皟鐢ㄩ挬瀛愬嚱鏁帮紝灏嗗嚱鏁颁綔涓哄弬鏁颁紶鍏ワ紝浣滀负鍙傛暟鐨勫嚱鏁颁細鍦ㄥ搴旂殑寰幆涓璋冪敤銆備笉鐢ㄥ垱寤猴紝鍥犱负鐩稿綋浜庤繖涓樁娈碉紝璁板緱浠巚ue瀵煎叆銆?scriptsetup>onMounted(mountedFunction)functionmountedFunction(){console.log('mounted')}Computedwatch灞炴€х敤娉曞涓嬶細watch(counter,(newValue,oldValue)=>{console.log('鏂拌鏁板櫒鍊间负锛?+counter.value)})consttwiceTheCounter=computed(()=>counter.value*2)toReftoRefstoRef:涓€涓璞ef鐨勬煇涓睘鎬oRefs锛氭妸瀵硅薄鍙樻垚涓€涓櫘閫氱殑瀵硅薄锛屽畠鐨勫睘鎬у氨鏄疪ef銆傝皑鎱庝娇鐢?.RefSugar浠ヤ笅鏄綋鍓嶆彁璁細//澹版槑涓€涓敱搴曞眰reflet鏀寔鐨勫弽搴斿彉閲廲ount=$ref(1)//涓嶅啀闇€瑕?value锛乧onsole.log(count)//1functioninc(){//assignmentsarereactivecount++}璇ユ彁妗堢殑绗竴涓増鏈殑鍑虹幇寮曡捣浜嗗緢澶氫簤璁€傚師鍥犳槸瀹樻柟鏈€鍒濇墦绠椾娇鐢╮ef:鐨勮娉曪紝閫氳繃缂栬瘧鐪佺暐閲嶅浣跨敤ref瀵硅薄鐨剉alue灞炴€с€傝繖绉嶈娉曞洜涓虹牬鍧忎簡js鐨勫師鐢熻娉曡€屽紩璧蜂簡寰堝璐ㄧ枒鍜屼簤璁恒€傚搱鍝堝搱锛岀湅鍒板ぇ瀹剁殑杈╄鐪熺殑寰堟湁鎰忔€濄€傝瑙侊細https://github.com/vuejs/rfcs...绗簩涓増鏈洰鍓嶆瘮杈冨鏄撹澶у鎺ュ彈锛堟寮忕増杩樻病鍑猴級锛屾敼涓€涓嬪師鏉ョ殑ref鍔熻兘灏卞彲浠ヤ韩鍙楄繖涓娇鐢?ref璇硶绯栨晥鏋溿€傝瑙侊細https://github.com/vuejs/rfcs...锛岀幇鍦ㄤ富瑕佺湅绗簩鐗堬紝绗竴鐗堟槑鏄惧凡缁忓純鐢ㄤ簡锛屽厛鍒兂浜嗭紝鐪嬫槑鐧藉氨濂姐€傚疄闄呬笂锛?ref()鏄?(ref())鐨勭畝鍐欙紝鎵€浠ョ湡姝ｇ殑璇硶绯栧疄闄呬笂鏄?()銆?()涓ユ牸鏉ヨ鏄紪璇戞湡鏍囪锛岀敤浜庢彁绀虹紪璇戝櫒鎵€鏈夋爣璁扮殑ref鍙橀噺娣诲姞.value鏃堕渶瑕佹敞鎰忓嚑鐐癸細1鐢变簬鏄紪璇戞湡鏍囪锛屾墍浠ユ病鏈変娇鐢ㄦ椂闇€瑕佸紩鍏?鍙兘涓巐et涓€璧蜂娇鐢紝浣跨敤const鏄病鏈夋剰涔夌殑3鍙互鏍囪浠讳綍杩斿洖ref鐨刟pi4鏄殑缂╁啓API鏈夛細$ref,$computed,$shallowRef5$$ref()锛屽洜涓哄彉閲忎細榛樿娣诲姞鍒板悗闈娇鐢ㄧ殑鍙橀噺涓€傝$()鏍囪鍚庣殑鍊硷紝鎵€浠ュ綋闇€瑕佷娇鐢╮ef鏃讹紝闇€瑕侀€氳繃$$()鑾峰彇鍙橀噺瀵硅薄3.TeleportTeleport锛岀啛鎮塺eact鐨勫悓瀛﹀簲璇ュ杩欎釜涓嶉檶鐢燂紙涔熷氨鏄紶閫侀棬react)锛屽彲浠ュ緢濂界殑澶勭悊鏈ㄦ澘涓粍浠剁殑閫昏緫鍜屾妧鏈煕鐩撅紝浣跨敤鏂规硶濡備笅锛屼笉鐔熸倝鐨勫彲浠ュ幓瀹樼綉浜嗚В涓€涓嬶細<浼犻€佸埌="body">//selector閫夋嫨骞朵紶杈?div>瑕佷紶杈撶殑鍏冪礌