reactive的用法與ref的用法相似，也是將數據變成響應式數據，當數據發生變化時UI也會自動更新。不同的是ref用於基本數據類型，而reactive是用於復雜數據類型，比如對象和數組
例如：定義一個對象類型的變量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>
如上，當點擊按鈕時，讓數據user.age加1，當Vue發現數據發生變化，UI會自動更新
那我們驗證了，確實reactive函數可以將一個復雜數據類型變成響應式數據。我們不妨將reactive函數執行的結果打印出來看下，看看它返回值是什么
reactive將傳遞的對象包裝成了proxy對象
我們發現，reactive執行結果是將傳遞的對象包裝成了proxy對象
接下來我們測試一下，如果傳遞基本數據類型呢？
<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>
運行發現，基本數據傳遞給reactive，reactive並不會將它包裝成porxy對象，並且當數據變化時，界面也不會變化
需要注意的是，reactive中傳遞的參數必須是json對象或者數組，如果傳遞了其他對象（比如new Date()），在默認情況下修改對象，界面不會自動更新，如果也需要具有響應式，可以通過重新賦值的方式實現
使用ref函數可以處理基本數據，使期變成響應式數據