Vue3 toRef与toRefs

1 toRef:

作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。
语法：const name = toRef(person,'name')
应用: 要将响应式对象中的某个属性单独提供给外部使用时。

按照传统的方式我们在setup中返回的对象 在模板显示 需要对象.属性名的形式

正常写法：

<template>
    <div>
        <h2> 人的信息</h2>
        <p>姓名 {{person.name}}</p>
        <p>年龄 {{person.age}}</p>
        <p>性别 {{person.sex}}</p>
        <p>工作详情  内容{{person.job.name}} 薪资{{person.job.salary}}</p>
    </div>
    
</template>

使用toRef的写法：

<template>
    <div>
        <h2> 人的信息</h2>
        <p>姓名 {{name}}</p>
        <p>年龄 {{age}}</p>
        <p>性别 {{sex}}</p>
        <p>工作详情  内容{{job.name}} 薪资{{job.salary}}</p>
    </div>
    
</template>
<script>
import { reactive,provide,toRef,toRefs } from 'vue';
export default {

    setup() {

        let person = reactive({
            name:'张三',
            age:18,
            sex:'男',
            job:{
                name:'UI开发',
                salary:'20K'
            }
        })

        return {
            person,
            name:toRef(person,'name'),
            age:toRef(person,'age'),
            sex:toRef(person,'sex'),
            job:toRef(person,'job'),

            

        }
    },
    
};
</script>

2 toRefs:

  将响应式对象中所有属性包装为ref对象, 并返回包含这些ref对象的普通对象

<script>
import { reactive,provide,toRef,toRefs } from 'vue';
export default {

    setup() {

        let person = reactive({
            name:'张三',
            age:18,
            sex:'男',
            job:{
                name:'UI开发',
                salary:'20K'
            }
        })

        return {
            //person,
            // name:toRef(person,'name'),
            // age:toRef(person,'age'),
            // sex:toRef(person,'sex'),
            // job:toRef(person,'job'),
            ...toRefs(person)

            

        }
    },
    
};
</script>