vue3学习——toRef和toRefs

你好，我是小零。今天我将带来我学习vue3之后的小节两个组合式api分别是toRef和toRefs。 先来看一下下面这些代码

<template>

    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <h2>薪资：{{job.salary}}</h2>
    <button @click="person.name+='~'">修改姓名</button>
    <button @click="person.age++">增长年龄</button>
    <button @click="person.job.salary++">涨薪</button>
</template>

<script>
import {reactive} from 'vue'
export default {
    name: 'personDemo',
    setup() {
        let person=reactive({
            name:'张三',
            age:10,
            job:{
                salary:30
            }
        })
        return {
           person
        }

    }
}
</script>

在上述代码中，如果在插值语法中使用对象来显示数据，需要对象名.属性，例如上面的姓名需要写成person.name。但是如果想不用person，那就需要将别名设置为响应式。或者有些数据需要设置成响应式，有些不用，就需要用到toRef，如下。

<template>

    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <h2>薪资：{{salary}}</h2>
    <button @click="name+='~'">修改姓名</button>
    <button @click="age++">增长年龄</button>
    <button @click="salary++">涨薪</button>
</template>

<script>
import {reactive, toRef} from 'vue'
export default {
    name: 'personDemo',
    setup() {
        let person=reactive({
            name:'张三',
            age:10,
            job:{
                salary:30
            }
        })
        return {
             name:toRef(person.name,'name'),
             age:toRef(person.age,'age'),
             salary: toRef(person.job.salary,'salary')
        }

    }
}
</script>

也可以使用批量响应式api，toRefs，但是toRefs只能设置一层，比如上述例子中的job属性也为对象，则响应式取名只能作用到job而不能作用到salary。如下

<template>

    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <h2>薪资：{{job.salary}}</h2>
    <button @click="name+='~'">修改姓名</button>
    <button @click="age++">增长年龄</button>
    <button @click="job.salary++">涨薪</button>
</template>

<script>
import {reactive, toRefs} from 'vue'
export default {
    name: 'personDemo',
    setup() {
        let person=reactive({
            name:'张三',
            age:10,
            job:{
                salary:30
            }
        })

        const x=toRefs(person)
        return {
            // name:toRef(person.name,'name'),
            // age:toRef(person.age,'age'),
            // salary: toRef(person.job.salary,'salary')
            ...x
        }

    }
}
</script>

这就是今天的vue3学习小结。