鐪嬪埌鏍囬锛屾槸涓嶆槸寰堟儕璁讹紵涔熻浣犱細瑙夊緱Reactivity鍦ㄨ璁′笂鏈夌己闄凤紵鍏跺疄閰掗鐨勬湰鎰忎笉鏄枬閰掞紒Reactivity鍙互璇存槸vue3涓渶澶嶆潅鐨勯儴鍒嗭紝褰撶劧涔熸槸鏈€寮哄ぇ鐨勪竴鐐广€傚惉璧锋潵鍍忎竴鍧楃‖楠ㄥご銆傝繖璁╂垜鎯宠捣浜嗐€婁袱鍓戙€嬩腑鏉庝簯榫欓潰瀵瑰皬鏃ユ湰鐨勬寫琛呰鐨勮瘽锛氭潵鐨勬槸闃庣帇锛屾垜涔熶笉寰椾笉鎶婁粬鐨勮儭瀛愭姳涓嬫潵銆傛墍浠ヤ粖澶╂垜浠篃鎺ュ彈浜哛eactivity鐨勮儭椤汇€傚湪vue3涓紝瀹冩毚闇蹭簡鎵€鏈夋暟鎹搷搴旂殑API锛岃繖鍦╲ue2涓槸娌℃湁鍋氬埌鐨勶紝閭ｄ箞vue2鏄€庝箞鍋氬埌鐨勫憿锛熷畠灏嗘暟鎹厤缃垚鏁版嵁锛屾暟鎹腑鐨勬暟鎹細鑷姩鍙樻垚鍝嶅簲寮忔暟鎹€傛垜浠妸杩欎釜杩囩▼绉颁负娉ㄥ叆锛屽畠浼氳娉ㄥ叆鍒扮粍浠跺疄渚嬩腑锛屽涓嬶細{//data涓殑鏁版嵁閮芥槸鍝嶅簲寮忕殑锛屽畠浼氳娉ㄥ叆鍒扮粍浠跺疄渚嬩腑data(){return{name:"Forensic",idol:"Jobs",publicNumber:"Front-endHunter"}}}浣嗘槸鍦╲ue3涓紝瀹冧笉鍐嶆槸鏁版嵁锛岃€屾槸setup鍑芥暟锛屾垜浠О涔嬩负compositionApi锛屽鏋滄垜浠兂鍦╯etup鍑芥暟涓娇鐢ㄥ搷搴斿紡鏁版嵁锛屾垜浠笉鍙伩鍏嶅湴闇€瑕佹毚闇插搷搴斿紡Api浠ヤ緵鎴戜滑浣跨敤銆傛帴涓嬫潵鎴戜滑鐪嬬湅vue3鎻愪緵浜嗗摢浜沝ataResponsive鐩稿叧鐨勫姛鑳姐€傪煃嘒etResponsiveData鍙互鑾峰彇鍝嶅簲鏁版嵁鐨刟pi锛歳eactiveapi浼氫紶鍏ヤ竴涓璞★紝鐒跺悗杩斿洖涓€涓璞′唬鐞唒roxy锛屽彲浠ユ繁搴︿唬鐞嗗璞＄殑鎵€鏈夋垚鍛橈紝涔熷氨鏄鍙互宓屽鍦ㄩ噷闈bject瀵硅薄涔熸槸涓€涓弽搴斿紡鏁版嵁绀轰緥馃尠锛歩mport{reactive}from'vue'conststate=reactive({name:"Forensic",age:18})window.state=state;鏁堟灉灞曠ず锛氱幇鍦ㄨ繖涓璞″彉鎴愪簡鍝嶅簲寮忕殑锛屽綋瀵硅薄琚搷浣滄椂锛孷ue鍙互鏀跺埌閫氱煡銆俽eadonlyAPI闇€瑕佷紶鍏ヤ竴涓璞℃垨鑰呬竴涓唬鐞嗭紝瀹冧篃浼氳繑鍥炰竴涓璞′唬鐞嗭紝鍙兘璇诲彇浠ｇ悊瀵硅薄銆傛垚鍛橈紝浣嗕笉鑳戒慨鏀癸紝鍗冲彧鑳借幏鍙栵紝涓嶈兘璁剧疆锛屼篃鍙互娣卞害浠ｇ悊瀵硅薄涓殑鎵€鏈夋垚鍛樸€備妇涓牀瀛愷煂帮細import{reactive,readonly}from'vue'constimState=readonly({name:"Forensic",age:18})window.imState=imState;鏁堟灉灞曠ず锛氱湅鍒版病鏈夛紝鎶ラ敊锛屾彁绀鸿瑕佷慨鏀圭殑鐩爣鏄彧璇荤殑銆傚鏋滀慨鏀瑰け璐ワ紝鎹readonly鍙互浼犻€掍竴涓璞℃垨鑰呬竴涓唬鐞嗐€傝鎴戜滑鐪嬬湅浼犻€掍唬鐞嗘椂浼氬彂鐢熶粈涔堛€俰mport{reactive,readonly}from'vue'conststate=reactive({name:"ForensicMedicine",age:18})constimState=readonly(state);//浼犻€掍竴涓猘gent鍒皐indow.imState=imState;鏁堟灉灞曠ず锛氶€氳繃浠ｇ悊鏃讹紝涓嶅厑璁歌繘琛岃祴鍊兼搷浣滐紝鍙嶆鍙閫氳繃readonly锛屽氨鍙兘璇诲彇锛屼笉鑳借祴鍊笺€備笉杩囨垜浠彲浠ヤ慨鏀箁eadonly涔嬪墠鐨勫€硷紝鐒跺悗璁╁畠鍋氫唬鐞嗐€傪煋㈡敞鎰忥細reactive鍜宺eadonly锛岃繖涓や釜api鏄唬鐞嗗璞★紝涓嶈兘浠ｇ悊鏅€氬€硷紝浼氭姤閿欍€備妇涓牀瀛愷煂帮細import{reactive,readonly}from'vue'conststate=reactive("forensic")鏁堟灉灞曠ず锛?[image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/54cc2bca665c491cb14ede3e3c3919e1~tplv-k3u1fbpfcp-watermark.image)鎶ヤ簡涓€涓獁arning锛屽師濮嬪€兼槸invalidProxy锛屾墍浠ュ鏋滈渶瑕佷唬鐞嗘櫘閫氬€兼€庝箞鍔烇紵鐒跺悗浣犻渶瑕佷娇鐢╜ref`api銆備换浣曟暟鎹兘鍙互鍦╮efref涓紶閫掞紝鏁版嵁鏈€缁堜細琚斁鍏ヤ竴涓璞′腑鐨剉alue涓紝姣斿this{value:...}锛屽value鐨勮闂槸鍝嶅簲寮忕殑锛屽鏋滆祴缁檝alue鐨勫€兼槸瀵硅薄锛屼細閫氳繃reactive鍑芥暟浠ｇ悊涓句釜鏍楀瓙馃尠锛歩mport{reactive,readonly,ref}from'vue'conststate=ref({name:"Forensic",age:18})window.state=鐘舵€?鏁堟灉灞曠ず锛?[image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/41013bd555294aa3b53adc1c6602998e~tplv-k3u1fbpfcp-watermark.image)杩樻湁涓€绉嶇浜岀鎯呭喌鏄細濡傛灉浼犲叆鐨勫€煎凡缁忔槸浠ｇ悊锛岄偅涔堢洿鎺ヤ娇鐢ㄤ唬鐞?*涓句釜鏍楀瓙馃尠锛?*```jsimport{reactive,readonly,ref}from'vue'conststate=reactive({name:"ForensicMedicine",age:18});constimState=ref(state)window.imState=imState;```**鏁堟灉灞曠ず锛?*computedcomputed闇€瑕佷紶鍏ヤ竴涓猣unction鍑芥暟锛屽畠杩斿洖鐨勫€煎拰ref涓€鏍凤紝涔熸槸{value:...}锛屽湪璇诲彇value鍊肩殑鏃跺€欙紝浼氭牴鎹儏鍐碉紝鍦ㄨ繖绉嶆儏鍐典笅灏辨槸鏄惁浣跨敤浜嗚繖涓嚱鏁帮紝缂撳瓨璧锋潵浜嗐€傚綋渚濊禆鐨勫搷搴旀暟鎹病鏈夊彉鍖栨椂锛岃幏鍙栫紦瀛樹腑鐨勫€笺€傚彧鏈夊綋state.name鎴杝tate.age鏀瑰彉鏃讹紝瀹冩墠浼氬啀娆℃洿鏂般€傝窇涓牀瀛愷煂帮細import{reactive,readonly,ref,computed}from'vue'conststate=reactive({name:"Forensic",age:18})constresult=computed(()=>{console.log("computed");returnstate.name+state.age})console.log(result.value);鏁堟灉灞曠ず锛?[](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d0f14b8654a94861a9100de3088923b6~tplv-k3u1fbpfcp-watermark.image)鍙嶆涓婇潰鍥涗釜API鏃犺鎬庝箞澶勭悊锛岄兘鏄湁涓€涓洰鐨勶紝灏辨槸鎶婃暟鎹彉鎴愬搷搴斿紡鏁版嵁銆傞偅涔堝湪寮€鍙戜腑浣跨敤鍝竴涓紵1.濡傛灉浣犳兂璁╀竴涓璞″彉鎴愬搷搴斿紡鏁版嵁锛屼綘鍙互浣跨敤`reactive`鎴栬€卄ref`2銆傚鏋滆浣垮璞＄殑鎵€鏈夊睘鎬у彧鑳借鍙栵紝璇蜂娇鐢╮eadonly3銆傚鏋滀綘鎯宠涓€涓潪瀵硅薄鏁版嵁鎴愪负鍝嶅簲寮忔暟鎹紝浣跨敤`ref`4銆傚鏋滀綘鎯虫牴鎹凡鐭ョ殑鍝嶅簲鏁版嵁鑾峰彇涓€涓柊鐨勫搷搴旀暟鎹紝浣跨敤`computed`馃摙娉ㄦ剰锛氫娇鐢╜ref`鏃讹紝浣犺鑾峰彇鐨勬暟鎹繀椤绘槸`ref.value`ha锛屽惁鍒欒幏鍙栦笉鍒帮紝璁颁綇锛侌煒侌煃夌洃鍚暟鎹彉鍖杦atchEffectconststop=watchEffect(()=>{//watchEffect鍑芥暟浼氱珛鍗虫墽琛岋紝鐒跺悗鐩戝惉鍑芥暟涓娇鐢ㄧ殑鍝嶅簲寮忔暟鎹紝鍝嶅簲寮忔暟鎹彉鍖栧悗鍐嶆鎵ц})//閫氳繃璋冪敤stop鐨刦unctionwillstoplisteningstop();//鍋滄鐩戝惉涓句釜鏍楀瓙馃尠:import{reactive,ref,watchEffect}from"vue";conststate=reactive({a:1,b:2,});甯告暟璁℃暟=鍙傝€冿紙0锛夛紱watchEffect(()=>{console.log(state.a,count.value);//椹笂鎵ц涓€娆)state.a++;//杩欎釜瑕佺湅鏁版嵁鍙樺寲锛屽啀鎵ц涓€娆℃晥鏋滃睍绀猴細watchEffect鍑芥暟涔嬫墍浠ョ煡閬撲緷璧栧彂鐢熶簡鍙樺寲锛屾槸鍥犱负閲岄潰鐨勬暟鎹槸鍝嶅簲寮忕殑銆傝鍙栨暟鎹椂浣跨敤get鏂规硶锛実et浼氭敹闆嗕緷璧栥€傝繕闇€瑕佹敞鎰忕殑鏄紝濡傛灉渚濊禆鐨勬暟鎹悓鏃跺彉鍖栦簡寰堝娆★紝鏈€鍚庣殑缁撴灉浼氭樉绀轰竴娆★紝鍥犱负杩愯杩囩▼鏄紓姝ョ殑锛屼細鍦ㄥ井闃熷垪涓墽琛岋紝鐩村埌鏁版嵁鍙戠敓鍙樺寲鎵嶄細杩愯鏀瑰彉浜嗭紝濡備笅渚嬫墍绀猴細涓句釜鏍楀瓙馃尠锛歩mport{reactive,ref,watchEffect}from"vue";conststate=reactive({a:1,b:2,});甯告暟璁℃暟=鍙傝€冿紙0锛夛紱watchEffect(()=>{console.log(state.a,count.value);})//杩愯澶氭state.a++;鐘舵€?a++;鐘舵€?a++;鐘舵€?a++;鐘舵€?a++;鐘舵€?a++;鐘舵€?a++;鐘舵€併€俛++;鏁堟灉灞曠ず锛氫粠鏈€缁堢粨鏋滃彲浠ョ湅鍑猴紝鏈€缁堝彧杩愯浜嗕袱娆★紝涓€娆℃槸绔嬪嵆鎵ц锛岀浜屾鏄湪鏁版嵁鏀瑰彉涔嬪悗銆倃atch鐩稿綋浜巚ue2鐨?watch銆傝繖涓獁atch鏈夌偣楹荤儲锛屽洜涓洪渶瑕佹墜鍔ㄦ寚瀹氥€傜洃鍚摢浜涘€煎彂鐢熶簡鍙樺寲锛屽綋鍙戠敓鍙樺寲鏃讹紝浼氱粰浣犱竴涓悓鏃舵湁鏂板€煎拰鏃у€肩殑鏍楀瓙锛歩mport{reactive,ref,watch}from"vue";conststate=reactive({a:1,b:2,});甯告暟璁℃暟=鍙傝€冿紙0锛夛紱watch(()=>state.a,(newValue,oldValue)=>{console.log("newvalue",newValue,"oldvalue",oldValue);})state.a++;//淇敼渚濊禆鏁堟灉灞曠ず锛氿煋㈡敞鎰忥細杩欓噷闇€瑕佹敞鎰忕殑鏄紝watch鍜寃atchEffect鐨勫尯鍒槸watch涓嶄細绔嬪嵆杩愯鍑芥暟锛屽畠鍙細鍦ㄤ緷璧栫殑鍊煎彂鐢熷彉鍖栨椂鎵嶆墽琛岋紝watch涓細浼犻€掍袱涓弬鏁般€備笂闈㈢殑渚嬪瓙涓紝浼犻€掔殑鏄?)=>state.a锛屼负浠€涔堜笉鐩存帴浼犻€抯tate.a鍛紵濡傛灉鐩存帴浼爏tate.a锛岀浉褰撲簬浼犲叆浜嗕竴涓?锛屾墍浠ユ暟鎹槸娌℃湁鍝嶅簲寮忕殑锛屽涓嬩妇涓牀瀛愷煂帮細鐩存帴浼爏tate.aimport{reactive,ref,watch}from"vue"锛沜onst鐘舵€?鍙嶅簲鎴?{a:1,b:2,});甯告暟璁℃暟=鍙傝€冿紙0锛夛紱watch(state.a,(newValue,oldValue)=>{console.log("newvalue",newValue,"oldvalue",oldValue);})state.a++;//淇敼渚濊禆鏁堟灉灞曠ず锛氬鏋渟tate.a鐩存帴浼犺繃鍘伙紝杩欓噷浼氭姤璀﹀憡锛岀炕璇戣繃鏉ュ氨鏄細invalidmonitoringsource:1monitoringsourcecanonlybeagetter/effectfunction,ref,passiveobjects,orarraysofthesetypes锛屼篃灏辨槸璇磋繖閲岀殑鍙傛暟鍙兘鍝嶅簲鏁版嵁銆傚綋灏?)=>state.a鍑芥暟浼犻€掔粰瀹冩椂锛屽畠浼氬湪鎵嬭〃涓繍琛岋紝浠ヤ究鏀堕泦渚濊禆椤广€傚湪浣跨敤reactiveapi鐨勬椂鍊欙紝闇€瑕佷紶鍏ヨ繖鏍蜂竴涓嚱鏁般€備娇鐢╮efapi鏃讹紝watch涓殑绗竴涓弬鏁板彲浠ュ啓鎴恈ount锛屽洜涓篶ount鏄竴涓璞★紝濡備笅锛氫妇涓牀瀛愷煂帮細鐩存帴浼燾ountimport{reactive,ref,watch}from"vue";conststate=reactive({a:1,b:2,});甯告暟璁℃暟=鍙傝€冿紙0锛夛紱watch(count,(newValue,oldValue)=>{console.log("Newvalue",newValue,"oldvalue",oldValue);})count.value++;//淇敼渚濊禆鏁堟灉灞曠ず锛氬鏋滀竴涓猚ount.value鏄紶鍏ワ紝涔熶細鎶ラ敊锛屽洜涓轰篃鑾峰彇浜哻ount.value灞炴€у€煎涓嬶細涓句釜鏍楀瓙馃尠锛氱洿鎺ヤ紶countimport{reactive,ref,watch}from"vue";conststate=reactive({a:1,b:2,});甯搁噺璁℃暟=ref(0);watch(count.value,(newValue,oldValue)=>{console.log("NewValue",newValue,"OldValue",oldValue);})count.value++;//淇敼渚濊禆鏁堟灉灞曠ず锛氫粠杩愯缁撴灉锛岃繕鎶ヤ簡涓€涓獁arning锛屾墍浠ヨ繖鍧椾綘瑕佹敞鎰忎竴涓嬸煒氬浜嗭紝鎴戝樊鐐瑰繕浜唚atch鍙互鐩戞帶澶氫釜鏁版嵁锛屽涓嬶細涓句釜鏍楀瓙馃尠锛歱asscountand()=>state.aimport{reactive,ref,watch}鏉ヨ嚜鈥渧ue鈥濓紱conststate=reactive({a:1,b:2,});甯告暟璁℃暟=鍙傝€冿紙0锛夛紱watch([()=>state.a,count],([newValue1,newValue2],[oldValue1,oldValue2])=>{console.log("鏂板€?,newValue1,newValue2,"鏃у€?,oldValue1,鏃у€?);})璁℃暟鍊?+;鐘舵€?a++;鏁堟灉灞曠ず锛氿煋㈡敞鎰忥細涓嶇鏄痺atch杩樻槸watchEffect锛屽綋渚濊禆鍙戠敓鍙樺寲鏃讹紝鍥炶皟鍑芥暟鏄紓姝ユ墽琛岀殑锛屽綋鐒朵細鍘诲井闃熷垪绛夊緟鎵ц涓€鑸潵璇达紝watchEffect鏄渶鏂逛究鐨勶紝鍥犱负瀹冧細鑷姩璺熻釜渚濊禆鐨勫彉鍖栵紝涓嶉渶瑕佹墜鍔ㄦ寚瀹氾紝浣嗘槸鏈夋椂鍊欐垜浠笉寰椾笉浣跨敤watch锛屾瘮濡傦細鎴戜滑涓嶆兂涓€寮€濮嬪氨鎵ц鍥炶皟鍑芥暟锛屽彧鎯宠瀹僼o鍙湁鍦ㄦ暟鎹彂鐢熷彉鍖栨椂鎵嶄細鎵ц銆傝繖涓椂鍊欐垜浠氨鍙兘鐢╳atch浜嗐€傚彟涓€绉嶆柟寮忔槸褰撴暟鎹彂鐢熷彉鍖栨椂锛屾垜浠渶瑕佺煡閬撴棫鍊兼槸澶氬皯锛熻繖涓椂鍊欐垜浠繕闇€瑕佺敤鍒皐atch銆傛渶鍚庝竴涓槸鎴戜滑闇€瑕佺洃鍚竴浜涘湪鍥炶皟鍑芥暟涓病鏈夌敤鍒扮殑鏁版嵁锛屾瘮濡傝緭鍑篶onsole.log("鎴戣鏀?)锛寃atchEffect涓槸鍋氫笉鍒扮殑馃崑鍒ゆ柇鏈夊洓绉嶈幏鍙栧搷搴斿紡鏁版嵁鏃剁殑API绫诲瀷锛屽嵆reactive銆乺eadonly銆乺ef鍜宑omputed銆傝繑鍥炴湁涓ょ褰㈠紡锛屼竴绉嶆槸瀵硅薄浠ｇ悊锛屼竴绉嶆槸{value:...}銆傛湁鏃跺€欐垜浠彲鑳介啋涓嶈繃鏉ワ紝鑴戝瓙涓€鐗囨贩涔憋紝鎵€浠ue3鎻愪緵浜?涓狝PI鏉ュ尯鍒嗛€氳繃鍝鏂瑰紡鑾峰彇鍝嶅簲寮忔暟鎹細涓€鏉℃暟鎹槸閫氳繃reative鍒涘缓鐨勶紝鍏蜂綋鍙互鍙傝€冭繖涓摼鎺ワ細https://v3.vuejs.org/api/basi...isReadonly锛氬垽鏂竴鏉℃暟鎹槸鍚︽槸閫氳繃readonly鍒涘缓鐨刬sRef:to鍒ゆ柇涓€鏉℃暟鎹槸鍚︽槸ref瀵硅薄##馃崋杞崲鏈夋椂鍊欐垜浠嬁鍒颁竴鏉℃暟鎹紝鎴戜滑骞朵笉鐭ラ亾瀹冩槸浠€涔堬紝鏈夋椂鍊欐垜浠篃涓嶅叧蹇冨畠銆備笉绠℃槸ref杩樻槸proxy锛岄閮戒笉鐭ラ亾鏄粈涔堬紒杩欐椂鍊欐垜浠彲浠ヤ娇鐢╱nrefunrefunref绛変环浜庯細isRef(val)锛焮todos=unref(todos);//...鍏朵粬浠ｇ爜}toReftoRef浼氬皢鍝嶅簲寮忓璞′腑鐨勪竴涓睘鎬ц浆鎹㈡垚ref鏍煎紡鐨勬暟鎹妇涓牀瀛愷煂帮細import{reactive,toRef}from"vue";conststate=reactive({name:"Forensic",age:18});constnameRef=toRef(state,"name");console.log(nameRef);//鏈€鍚巤value:...}ThisformnameRef.value="FrontHunter";//淇敼杩欎釜鍊兼椂锛宻tate涓殑鏁版嵁涔熶細鍙楀埌褰卞搷console.log(state.name);鏁堟灉灞曠ず锛歵oRefs鎶婁竴涓猺eactive瀵硅薄鐨勬墍鏈夊睘鎬ч兘杞负ref鏍煎紡锛岀劧鍚庢墦鍖呮垚涓€涓猵lain-object鏅€氬璞¤繑鍥炰竴涓牀瀛愷煂帮細import{reactive,toRefs}from"vue";conststate=reactive({name:"forensic",age:18});conststateAsRefs=toRefs(state);console.log(stateAsRefs);/*stateAsRefs涓嶆槸浠ｇ悊瀵硅薄锛岃€屾槸鏅€氬璞★紝鏍煎紡濡備笅:{name:{value:ObjectRefImpl},age:{value:ObjectRefImpl}}*/鏁堟灉灞曠ず锛氫负浠€涔堣杩欐牱鍋氾紵涓句釜鏍楀瓙馃尠锛氭垜浠渶瑕佸皢涓や釜鍙嶅簲寮忔暟鎹贩鍚堝湪涓€璧枫€傚鏋滄垜浠洿鎺ヤ娇鐢ㄥ睍寮€杩愮畻绗﹀氨瀹屼簡锛屾暟鎹細澶卞幓reactivesetup(){conststate1=reactive({a:1,b:2});conststate2=reactive({c:3,d:4});return{...state1,//澶卞幓鍝嶅簲鎬э紝鐩稿綋浜庡湪杩欓噷鍐檃:1,b:2...state2,//澶卞幓鍝嶅簲鎬э紝鐩稿綋浜庡湪杩欓噷鍐欎竴涓猚:3,d:4};}锛岄偅涔堟€庝箞瑙ｅ喅鍛紵鍙渶鍦╯etup()涔嬪鏀剧疆涓€涓猼oRefs{conststate1=reactive({a:1,b:2});conststate2=reactive({c:3,d:4});return{...toRefs(state1),//responsive...toRefs(state2),//responsive};},馃槉濂戒簡锛屼互涓婂氨鏄垜鐨勫垎浜紝甯屾湜瀵瑰ぇ瀹舵湁鎵€甯姪锛屾杩庤璁鸿瘎璁哄尯~甯屾湜澶у鍠滄馃憤鏀寔~馃槝锛屾垜浼氭洿鏈夊姩鍔涚殑馃锛屾櫄瀹夛紒
