h1{棰滆壊锛歳gb(65,184,131);opacity:var(--opacity);}鍓嶈█鍦╒ue3.0.3鐗堟湰涓紝宸茬粡瀹炵幇浜哛ef璇硶绯栵紝鍗充娇鏈夊緢澶氫汉鍙嶅锛屾父闆ㄦ邯鍧氫俊杩欎釜璇硶sugar浼氬枩娆ypeScript锛岀敤涔嬪墠瑙夊緱涓嶅ソ锛岀敤浜嗕箣鍚庤鐪熺殑寰堝ソ銆傛墍浠ヤ笉椤惧ぇ瀹剁殑鍙嶅锛屾垜浠瘏鐒跺喅鐒剁殑瀹炵幇浜嗚繖涓姹傘€傞鍏堟垜浠畝鍗曞洖椤句竴涓嬭繖涓娉曠硸鏄仛浠€涔堢敤鐨勶細Ref璇硶绯栦箣鍓嶏紝鎴戜滑瑕佸畾涔変竴涓熀鏈暟鎹被鍨嬬殑鍝嶅簲寮忓彉閲忥紝闇€瑕佽繖鏍峰啓锛歩mport{ref}from'vueconsta=ref(0)浣跨敤鐨勬椂鍊欏簲璇ヨ繖鏍峰啓锛歛.value=a.value+10//ora.value+=10杩欎釜value灞炴€у緢鐑︿汉锛屽洜涓烘垜浠畾涔変簡涓€涓暟瀛?锛屽苟涓斿懡鍚嶄负a銆傝櫧鐒舵垜浠病鏈夎繖涔堝啓锛歝onsta=0锛屼絾鏄湪寰堝浜虹殑鍗拌薄涓紝杩欎釜a灏卞儚涓婇潰杩欒浠ｇ爜锛屽簲璇ユ槸鍩虹绫诲瀷锛屼竴鏂归潰涓嶇洿瑙傦紝缁忓父蹇樿鍐?value銆傚彟涓€鏂归潰锛屽啓璧锋潵涔熷緢楹荤儲锛屾湁鏃跺€欓渶瑕佸啓.value锛屾湁鏃跺€欎笉闇€瑕併€備緥濡傦紝鍦?template>鏍囩涓娇鐢ㄥ畠鏃讹紝鎴栬€呭皢ref鍒嗛厤缁欏弽搴斿紡瀵硅薄鏃讹紝鎮ㄤ笉闇€瑕佺紪鍐?value锛歩mport{ref,reactive}from'vue'constobj=reactive({a:ref(0)})//杩欓噷涓嶉渶瑕佸啓鎴恛bj.a.valueconsole.log(obj.a)锛岃繖鏃犵枒缁欐垜浠鍔犱簡寰堝绮剧璐熸媴锛屽挨闆ㄧ啓甯屾湜閫氳繃缂栬瘧鍍忓熀鏈被鍨嬩竴鏍蜂娇鐢╮ef,鍐欐硶濡備笅锛?/澹版槑涓€涓彉閲忥紙杩欎釜鍙橀噺浼氳缂栬瘧鎴愪竴涓猺ef锛塺ef:count=1functioninc(){//杩欎釜鍙橀噺鍙互鍍忔櫘閫氬彉閲忎竴鏍蜂娇鐢╟ount++}//濡傛灉浣犳兂寰楀埌鍘熷鍙橀噺锛岄渶瑕佸湪鍙橀噺console.log($count.value)鍓嶅姞涓€涓煉茬鍙稸ue3.0.3CHANGELOG閫氳繃娓哥帀鐜哄湪GitHub涓婄殑CHANGELOG锛屾垜浠彲浠ヤ簡瑙ｅ埌锛氬厛涓嶆彁涓婂崐骞翠慨澶嶇殑bug銆傝鎴戜滑鐪嬬湅鏂扮殑瀹為獙鐗规€э細compileScript鍐呰仈娓叉煋鍑芥暟妯″紡鏂扮殑鑴氭湰璁剧疆瀹炵幇鏂扮殑SFCcss鍙彉娉ㄥ叆瀹炵幇鏀寔kebab-case缁勪欢鍦╘exportdefault{data(){return{opacity:0}},mounted(){setInterval(_=>{this.opacity>=1&&(this.opacity=0)this.opacity+=0.2},300)}}h1{棰滆壊锛歳gb(65,184,131);opacity:var(--opacity);}杩愯缁撴灉锛氬彲浠ョ湅鍒版湁杩欎釜鐗规€э紝鎴戜滑鍙渶瑕佸皢JS鍙橀噺鏀规垚鍚屽悕鍗冲彲锛岃繖鏍峰彲浠ヨ鎴戜滑鐨勯」鐩洿鍔犵伒娲伙紝姣斿鏍规嵁鐢ㄦ埛杈撳叆鐨勫悎娉曢鑹插€煎姩鎬佹崲鑲ゃ€備絾鏄繖娆℃洿鏂版敼鍙樹簡鍐欐硶銆?style>鏍囩涓笉鐢ㄥ啓vars="{xxx}"锛孋SS浠ｇ爜涓笉鐢ㄥ啓鍘熺敓CSS鍙橀噺寮曠敤(var(--xxx))锛屽彇鑰屼唬涔嬬殑鏄嚱鏁皏-bind()锛屾敞鎰忊殸锔忚櫧鐒惰繖涓姛鑳界被浼间簬JS涓殑v-bind锛屼絾鏄彧鑳藉湪CSS涓娇鐢紝鍐欐硶濡備笅锛?template>shit锛?/h1>澶嶅埗浠ｇ爜濡傛灉鏄疛S鍙橀噺濡傛灉鏄痻xx.xxx鐨勫舰寮忥紝姣斿锛歟xportdefault{data(){return{font:{weight:100}}}}閭ｄ箞css涓嶈兘鐩存帴杩欐牱鍐欙細h1{font-weight:v-bind(font.weight)}浣嗛渶瑕佺敤涓€瀵瑰紩鍙峰睍寮€锛岀被浼间簬瀛楃涓茬殑褰㈠紡锛歨1{font-weight:v-bind('font.weight')}#鏆撮湶API閭ｄ箞杩欏埌搴曟槸浠€涔堬紵鍦╒ue2鏃舵湡锛屾垜浠€氳繃OptionsAPI鍐欎唬鐮侊紝涔熷氨鏄鎴戜滑闇€瑕佸鍑轰竴涓璞★紝瀵硅薄鐨刱ey鏃犻潪灏辨槸閭ｄ簺鐔熸倝鐨勶細exportdefault{data(){},mounted(){},computed:{},methods:{},//鐪佺暐涓€浜涢€夐」...}鐜板湪娣诲姞涓€涓柊鐨別xpose:exportdefault{data(){},mounted(){},computed:{},methods:{},//鐪佺暐涓€浜涢€夐」...expose:[]}杩欎釜涓滆タ鏄仛浠€涔堢敤鐨勶紵澶撮鍏堬紝瀹冪殑鐢ㄦ硶绫讳技浜巔rops鐨勬暟缁勫舰寮忥細exportdefault{data(){return{x:1,y:2}},expose:['x']}杩欐牱锛屽湪鐖剁粍浠惰幏鍙栧瓙缁勪欢瀹炰緥锛屽瓙缁勪欢鍙湁鍙橀噺x锛岃幏鍙栦笉鍒皔锛丆ompositionAPI涓殑鐢ㄦ硶鏄繖鏍风殑锛歟xportdefaultdefineComponent((_,{expose})=>{expose({x:ref(1)})return{x:ref(2),y:ref(3)}}}锛夌湅锛佹垜浠繖閲屾湁涓や釜x锛岀寽鐚滃摢涓獂浼氳瀵煎嚭锛熺瓟妗堟槸濡傛灉鏈変袱涓鍑哄彉閲忥紝浠xpose瀵煎嚭鐨勯偅涓负鍑嗭紝閭ｄ箞CompositionAPI鍜孫ptionsAPI娣峰悎浣跨敤浼氭槸浠€涔堟牱瀛愶細expotrdefaultdefineComponent({expose:['x'],data(){return{x:1}},setup(_,{expose}){expose({y:ref(2)})return{y:ref(3),z:ref(4)}}})姝ｇ‘鐨勭瓟妗堟槸锛歺=1y=2z=undefined褰撶劧锛岃繖浜涘彧鍦ㄧ粍浠跺璧蜂綔鐢紝z浠嶇劧鍙互鍦ㄧ粍浠跺唴閮ㄥ緱鍒帮紝y浠嶇劧绛変簬3銆傛湁鐨勫姛鑳藉緢濂藉緢瀹炵敤锛屼絾鏄湁鐨勨€︹€︿笉鐭ラ亾璇翠粈涔堝ソ銆傛偍濡備綍鐪嬪緟宸茬粡闈㈢洰鍏ㄩ潪鐨刅ue锛?/p>
