vue3 toRefs 与 toRef

toRefs 与 toRef的作用：将一个响应式对象中的每一个属性，转换为ref对象。不同之处 可参考代码

<template>
    <div class="box">
        <div>姓名：{{ person.name }}，年龄：{{ person.age }}</div>
        
        <el-text size="large" type="success">toRef取值</el-text>
        <div>姓名：{{ anName }}，年龄：{{ anAge }}</div>
        
        <el-text size="large" type="success">toRefs取值</el-text>      
        <div>姓名：{{ name }}，年龄：{{ age }}</div>
        
		<el-button type="primary" @click="changeName">修改姓名</el-button>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, toRef } from 'vue'

let person = reactive({ name: '张三', age: 18 })


// toRef可将person对象中的属性取出，且依然保持响应式的能力
let anAge = toRef(person, 'age')
let anName = toRef(person, 'name')

// 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
let { name, age } = toRefs(person)

//修改姓名
function changeName(){
    // 以下 三种方法 均可实现
     name.value = '李小四'
    // anName.value = '李小四'
    // person.name = '李小四'
  }

</script>