vue3 toref函数 torefs函数 简化模板变量长度

一、作用

简化模板{{xx}}，xx的长度

二、toRef

1、语法

toRef(对象,属性)

2、案例

<template>
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>工资:{{ salary }}</h2>
    <button @click="name += `~`">姓名</button>
    <button @click="age += 1">年龄</button>
    <button @click="salary-=10">工资</button>
</template>

<script>
    import {reactive, toRef} from 'vue';
    export default {
        name:'Demon',
        setup(){
            let person = reactive({
                name: 'duck',
                age: 8,
                job:{
                    mode:'996',
                    salary: 2800
                }
            })
            console.log(person)
            return{
                name: toRef(person, 'name'),
                age: toRef(person, 'age'),
                salary: toRef(person.job, 'salary')
            }
        }
       
    }
</script>

三、toRefs

1、语法

注意：toRefs只能简化一层对象，不能简化深层

toRefs(对象)

 2、使用

<template>
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>工资:{{ job.salary }}</h2>
    <button @click="name += `~`">姓名</button>
    <button @click="age += 1">年龄</button>
    <button @click="job.salary-=10">工资</button>
</template>

<script>
    import {reactive, toRefs} from 'vue';
    export default {
        name:'Demon',
        setup(){
            let person = reactive({
                name: 'duck',
                age: 8,
                job:{
                    mode:'996',
                    salary: 2800
                }
            })
            console.log(person)
            return{
              ...toRefs(person)
            }
        }
       
    }
</script>

<style>

</style>