vue3.0学习笔记 (toRef和toRefs)

1.正常写法

<template>

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


<script>

export default {
    setup() {
 
        let person = reactive({
            name:'张三',
            age:18,
            sex:'男',
            job:{
                position:'UI开发',
                salary:'20K'
            }
        })
 
        return {
            person,
        }
    },
    
};
</script>

2.运用toRef的写法

<template>

    <div>
        <h2> 人的信息</h2>
        <p>姓名 {{name}}</p>
        <p>年龄 {{age}}</p>
        <p>性别 {{sex}}</p>
        <p>工作详情  内容{{position}} 薪资{{salary}}</p>
    </div>
    
</template>
<script>
import { reactive,toRef} from 'vue';
export default {
 
    setup() {
 
        let person = reactive({
            name:'张三',
            age:18,
            sex:'男',
            job:{
                name:'UI开发',
                salary:'20K'
            }
        })
 
        return {
            name:toRef(person,'name'),
            age:toRef(person,'age'),
            sex:toRef(person,'sex'),
            position:toRef(person.job,'position'),
            salary:toRef(person.job,'salary'), 
        }
    },
    
};
</script>

2.运用toRefs的写法

<template>
    <div>
        <h2> 人的信息</h2>
        <p>姓名 {{name}}</p>
        <p>年龄 {{age}}</p>
        <p>性别 {{sex}}</p>
        <p>工作{{job.position}} 薪资{{job.salary}}</p>
    </div>
    
</template>
<script>
import { reactive,toRefs } from 'vue';
export default {
 
    setup() {
 
        let person = reactive({
            name:'张三',
            age:18,
            sex:'男',
            job:{
                position:'UI开发',
                salary:'20K'
            }
        })
 
        return {
            ...toRefs(person)
        }
    },
    
};
</script>

总结:toRef是智能一个转换，toRefs是全部转换。类似于前端的深拷贝和浅拷贝。toRefs拷贝出来的是一个对象，所以要用解构语法解构他。并且toRefs拷贝出来的外面那一层，遇到复杂的还要慢慢找到他这个变量