一、toRef的使用

将数据转换为响应式ref对象数据

<template>
    <h2>{{person}}</h2>
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <h2>薪资：{{salary}}</h2>
    <button @click="name+='X'">修改姓名</button>
    <button @click="age++">增长年龄</button>
    <button @click="salary++">增长薪资</button>
</template>
<script>
import {reactive,toRef} from 'vue'
export default{
    setup(){
        let person=reactive({
        name:'张三',
        age:20,
        job:{
            one:{
                salary:20
                }
            }
        })
        return{
            person,
            name:toRef(person,'name'),
            age:toRef(person,'age'),
            salary:toRef(person.job.one,'salary')
        }
    }
}
</script>

二、toRefs的使用

将数据批量转换为响应式ref对象

<template>
    <h2>{{person}}</h2>
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <h2>薪资：{{job.one.salary}}</h2>
    <button @click="name+='X'">修改姓名</button>
    <button @click="age++">增长年龄</button>
    <button @click="job.one.salary++">增长薪资</button>
</template>
<script>
import {reactive,toRef} from 'vue'
export default{
    setup(){
        let person=reactive({
        name:'张三',
        age:20,
        job:{
            one:{
                salary:20
                }
            }
        })
        return{
            person,
         ...toRefs(person)
        }
    }
}
</script>