Vue3快速上手(八) toRefs和toRef的用法

顾名思义,toRef 就是将其转换为ref的一种实现。详细请看:

一、toRef

1.1 示例

ts 复制代码
<script lang='ts' setup name="toRefsAndtoRef">
// 引入reactive,toRef
import { reactive, toRef } from 'vue'
// reactive包裹的数据即为响应式对象
let person = reactive(
    {
        name: "李四",
        age: 99
    }
)
function updatePerson() {
    let name = toRef(person, 'name')
    console.log(name);
    console.log(name.value);
    console.log(person.name);
    // 实际修改数据
    name.value += '@'
}

</script>

1.2 解释

toRef就相当于是将对象Person里的某个属性,如name,单独解构赋值给name,并使得name同为响应式对象。且修改name的值时,person.name的值随之变化。

如下图可以看到:

1、name是一个ObjectRefImpl对象的实例。

2、底层还是个Proxy(Object)

3、name的值和person.name的值是一起变化的。

1.3 页面效果

二、toRefs

理解了toRef之后,再理解toRefs就相当容易了。

无非是1和n的区别。

2.1 示例

ts 复制代码
<script lang='ts' setup name="toRefsAndtoRef">
// 引入reactive,toRefs
import { reactive, toRefs } from 'vue'
// reactive包裹的数据即为响应式对象
let person = reactive(
    {
        name: "李四",
        age: 99
    }
)
function updatePerson() {
    let {name, age} = toRefs(person)
    console.log(name);
    console.log(name.value, age.value);
    // 修改数据
    name.value += '@'
    age.value += 1
    console.log('name: ',name.value);
    console.log('person.name: ', person.name);
}

</script>

2.2 解释

toRefs就相当于是将对象Person里的所有属性,一起解构赋值给name,并使得name同为响应式对象。且修改name的值时,person.name的值随之变化。

如下图可以看到:

1、各个属性都是一个ObjectRefImpl对象的实例。

2、底层还是个Proxy(Object)

3、解构出的变量的值和对象里属性的值是一起变化的。

2.3 页面效果

END

相关推荐
叫我阿柒啊17 分钟前
从Java全栈到前端框架:一位程序员的实战之路
java·spring boot·微服务·消息队列·vue3·前端开发·后端开发
quan26312 小时前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
qb3 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构
虫无涯3 小时前
【分享】基于百度脑图,并使用Vue二次开发的用例脑图编辑器组件
前端·vue.js·编辑器
NewChapter °3 小时前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app
练习时长两年半的Java练习生(升级中)3 小时前
从0开始学习Java+AI知识点总结-30.前端web开发(JS+Vue+Ajax)
前端·javascript·vue.js·学习·web
小高0076 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
EveryPossible6 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua6 小时前
setup函数相关【3】
前端·javascript·vue.js
neon12047 小时前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画