Vue3.0—toRef与toRefs

最新推荐文章于 2023-04-27 15:56:04 发布

糖醋小排顾。

最新推荐文章于 2023-04-27 15:56:04 发布

阅读量181

点赞数 2

分类专栏： Vue学习文章标签： javascript vue.js 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/Guuiabc/article/details/128865698

版权

Vue学习专栏收录该内容

63 篇文章 0 订阅

订阅专栏

文章介绍了Vue中toRef和toRefs函数的用途，它们用于从响应式对象中创建对特定属性的引用。toRef允许开发者单独处理对象的一个属性，而toRefs则可以批量创建多个ref对象。在模板中可以直接更新通过toRef或toRefs获取的属性值，例如修改姓名、增加年龄和调整薪资。

摘要由CSDN通过智能技术生成

## 10.toRef

- 作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。

- 语法：```const name =toRef(person,'name')```

- 应用: 要将响应式对象中的某个属性单独提供给外部使用时。

- 扩展：```toRefs``` 与```toRef```功能一致，但可以批量创建多个 ref 对象，语法：```toRefs(person)```

<template>
    <h4>{{person}}</h4>
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <h2>薪资：{{job.j1.salary}}K</h2>
    <button @click="name+='~'">修改姓名</button>
    <button @click="age++">增长年龄</button>
    <button @click="job.j1.salary++">涨薪</button>
</template>
<script>
    import {ref,reactive,toRef,toRefs} from 'vue'
    export default {
        name: 'Demo',
        setup(){
            //数据
            let person = reactive({
                name:'张三',
                age:18,
                job:{
                    j1:{
                        salary:20
                    }
                }
            })
            // const name1 = person.name
            // console.log('%%%',name1)
            // const name2 = toRef(person,'name')
            // console.log('####',name2)
            const x = toRefs(person)
            console.log('******',x)
            //返回一个对象（常用）
            return {
                person,
                // name:toRef(person,'name'),
                // age:toRef(person,'age'),
                // salary:toRef(person.job.j1,'salary'),
                ...toRefs(person)
                //把person的第一层拆成对象，交出去
            }
        }
    }
</script>