Vue3:toRef和toRefs的用法

一、情景说明

我们知道,Vue3中想要定义对象类型的响应式数据

可以通过reactive函数实现

如果,后端返回的对象,有很多的字段,我们想进行结构化赋值

但是,又想保证赋值后的变量也是响应式数据

那么,这个时候,就要用到toRef和toRefs函数

注意:toRef和toRefs函数只能作用在reactive创建的变量上!

二、案例

reactive创建的变量

javascript 复制代码
    // 数据
    let person = reactive({
        name:'张三',
        age:18
    })

1、toRefs

javascript 复制代码
    let {name,age} = toRefs(person)

2、toRef

javascript 复制代码
    let nl = toRef(person,'age')

经过toRef和toRefs处理后

无论是person.age、age、nl变量,任何一个被修改,三者都会同时变化!

个人认为,这两个函数的好处,可能就是让编码更简便!

相关推荐
荣达17 分钟前
koa洋葱模型理解
前端·后端·node.js
xiaoyan201528 分钟前
Electron38-Winchat聊天系统|vite7+electron38+vue3电脑端聊天Exe
vue.js·electron·vite
reembarkation42 分钟前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
reembarkation44 分钟前
vue-pdf 实现blob数据的预览
javascript·vue.js·pdf
李明卫杭州1 小时前
JavaScript中的dispatchEvent方法详解
javascript
KenXu1 小时前
F2C-PTD工具将需求快速转换为代码实践
前端
给月亮点灯|1 小时前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js
芜青1 小时前
【Vue2手录12】单文件组件SFC
前端·javascript·vue.js
冷冷的菜哥1 小时前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播
hrrrrb1 小时前
【Python】字符串
java·前端·python