import {ref,reactive,toRefs,toRef} from 'vue'
// 数据
let person = reactive({name:'张三', age:18, gender:'男'})作用：将一个响应式对象中的每一个属性，转换为
ref对象。备注：
toRefs与toRef功能一致，但toRefs可以批量转换。let {name,gender} = toRefs(person) // 取出一批数据的值
// 通过toRef将person对象中的age 属性取出，且依然保持响应式的能力
let age = toRef(person,'age') //取出单个属性的值
<div class="person">
<h2>姓名：{
{name}}</h2>
<h2>年龄：{
{person.age}}</h2>
<h3>手机：{
{person.tel}}</h3>
<h3>地址：{
{person.address}}</h3>
<h4>基础数据修改：{
{person.baseData }}</h4>
<button @click="changeAddress">修改地址</button>
<button @click="changeTel()">修改手机号码</button>
<button @click="chagetAge()">修改年龄</button>
</div>
<script lang="ts" setup name = "Person">
import {ref,reactive, toRefs, toRef} from 'vue'
// toRefs 与 ref 的区别 开始
// 这是一个对象
let person = reactive({
name :"张三",
age :22,
gender: '男',
tel:1877888888,
address:"上海市aaa",
desc :"AAAAAAAAA",
baseData:8888888888888
})
// 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
let {name,address,tel} = toRefs(person)
let age = toRef(person,'age')
console.log("显示出来的数据：",age.value)
console.log(name.value)
console.log(address.value)
function changeAddress(){
name.value += '~'
console.log(name.value,person.name) // 这里输出的值是相同的
}
function changeTel(){
tel.value +=1
}
function chagetAge(){
age.value +=2
}
</script>