reactive的用法與ref的用法相似盈简，也是將數(shù)據(jù)變成響應(yīng)式數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)UI也會(huì)自動(dòng)更新太示。不同的是ref用于基本數(shù)據(jù)類型柠贤，而reactive是用于復(fù)雜數(shù)據(jù)類型，比如對(duì)象和數(shù)組
例如：定義一個(gè)對(duì)象類型的變量user
<template>
<div>
<p>{{ user }}</p>
<button @click="increase">click me! one year later</button>
</div>
</template>
<script>
import { reactive } from "vue";
export default {
name: "reactive",
setup() {
const user = reactive({ name: "Alice", age: 12 });
function increase() {
++user.age
}
return { user, increase };
},
};
</script>
如上类缤，當(dāng)點(diǎn)擊按鈕時(shí)臼勉，讓數(shù)據(jù)user.age加1，當(dāng)Vue發(fā)現(xiàn)數(shù)據(jù)發(fā)生變化餐弱，UI會(huì)自動(dòng)更新
那我們驗(yàn)證了宴霸，確實(shí)reactive函數(shù)可以將一個(gè)復(fù)雜數(shù)據(jù)類型變成響應(yīng)式數(shù)據(jù)囱晴。我們不妨將reactive函數(shù)執(zhí)行的結(jié)果打印出來(lái)看下，看看它返回值是什么
我們發(fā)現(xiàn)瓢谢，
reactive執(zhí)行結(jié)果是將傳遞的對(duì)象包裝成了proxy對(duì)象
接下來(lái)我們測(cè)試一下畸写，如果傳遞基本數(shù)據(jù)類型呢？
<template>
<div>
<p>{{ userAge }}</p>
<button @click="increase">click me! one year later</button>
</div>
</template>
<script>
import { reactive } from "vue";
export default {
name: "reactive",
setup() {
let userAge = reactive(12);
function increase() {
console.log(userAge);
++userAge;
}
return { userAge, increase };
},
};
</script>
運(yùn)行發(fā)現(xiàn)氓扛，基本數(shù)據(jù)傳遞給reactive枯芬，reactive并不會(huì)將它包裝成porxy對(duì)象，并且當(dāng)數(shù)據(jù)變化時(shí)采郎，界面也不會(huì)變化
需要注意的是破停，reactive中傳遞的參數(shù)必須是json對(duì)象或者數(shù)組，如果傳遞了其他對(duì)象（比如new Date()）尉剩，在默認(rèn)情況下修改對(duì)象真慢，界面不會(huì)自動(dòng)更新，如果也需要具有響應(yīng)式理茎，可以通過(guò)重新賦值的方式實(shí)現(xiàn)
以上就是vue3中reactive函數(shù)基本使用黑界！
