网站建站卖首饰侵权,个人博客主页登录,wordpress怎么把文章字体变成黑色,前端素材网#x1f680; 优质资源分享 #x1f680;
学习路线指引#xff08;点击解锁#xff09;知识定位人群定位#x1f9e1; Python实战微信订餐小程序 #x1f9e1;进阶级本课程是python flask微信小程序的完美结合#xff0c;从项目搭建到腾讯云部署上线#xff0c;打造一… 优质资源分享
学习路线指引点击解锁知识定位人群定位 Python实战微信订餐小程序 进阶级本课程是python flask微信小程序的完美结合从项目搭建到腾讯云部署上线打造一个全栈订餐系统。Python量化交易实战入门级手把手带你打造一个易扩展、更安全、效率更高的量化交易系统
Vue3 toRef 和 toRefs 函数
上一篇博文介绍了 vue3 里面的 ref 函数和 reactive 函数实现响应式数据今天主要来说一下 toRef 函数和 toRefs 函数的基本使用。
toRef 函数
通过上一篇博客我们知道ref 函数可以创建一个响应式的数据那 toRef 函数同样也是创建一个响应式的数据那么他们之间的区别是什么呢
首先一点ref 函数他的本质其实是去拷贝一份数据脱离了与源数据的交互。什么意思呢就是 ref 函数可以将对象里面的属性值变成响应式的数据修改响应式数据是不会影响到源数据但是视图层上的数据会被更新。但是 toRefs 函数的本质是引用也就是说toRef 函数会与源数据交互修改响应式数据会造成源数据的修改但是他的修改不会造成视图层数据的更新。
上面这段话理解吗不理解的话没关系下面通过几个案例就可以明白了。
toRef 函数使用
首先呢 toRef 函数有两个参数。
toRef(操作对象, 对象属性)
好接下来我们使用 toRef 函数写一个案例还是和以前一样页面展示一个用户的名称和年纪。
divh1toRef toRefs 函数h1p姓名{{boy\_toRef}}pp年龄{{boy.age}}pdivscriptimport { toRef } from vueexport default {setup() {const boy { // 创建一个用户对象name: 我是., // 用户名称age: 10 // 用户年龄}// 使用 toRef 函数包裹操作 boy 对象的 name 属性const boy\_toRef toRef(boy, name) console.log(boy\_toRef) // 我们直接打印看一下包裹后的数据格式return { boy, boy\_toRef }}}
script
保存代码刷新页面。 我们可以看到数据的结构在 value 里面直接就是 boy 下面 name 的属性值所以说接下来我们编写一个按钮点击按钮修改这个 name 值。
divh1toRef toRefs 函数h1p姓名{{boy\_toRef}}pp年龄{{boy.age}}pel-button typeprimary clickbtn修改 nameel-buttondivscriptimport { toRef } from vueexport default {setup() {const boy {name: 我是.,age: 10}// 这个 boy\_toRef 就是被 toRef 函数操作过的 boy 的 name 值const boy\_toRef toRef(boy, name) const btn () {boy\_toRef.value . // 把 name 修改成 .console.log(boy\_toRef) // 修改完成打印一下结果}return { boy, btn, boy\_toRef }}}
script
保存代码刷新页面然后点击按钮看一下页面效果。 通过截图展示的效果我们可以发现boy_toRef 的值确实被修改了但是呢页面并没有改变而且页面也没有出现错误。
这是什么原因呢 其实这不是 Bug 哈在本篇博文开始就说过toRef 函数会与源数据交互修改响应式数据会造成源数据的修改但是他的修改不会造成视图层数据的更新所以说这就是 toRef 函数的功能。确实视图没有数据更新我们通过上面的截图看到了但是源数据修改这个怎么看呢没关系在回答这个问题之前我们首先得知道什么是源数据。
就像上面的代码
const boy {name: 我是.,age: 10
}
const boy_toRef toRef(boy, name)
toRef 函数将 boy 对象给包裹了起来所以说boy 对象就是源数据。
所以说想知道源数据有没有改变在点击按钮之后打印一下 boy 对象看一下 boy 有没有被改变。
divh1toRef toRefs 函数h1p姓名{{boy\_toRef}}pp年龄{{boy.age}}pel-button typeprimary clickbtn修改 nameel-buttondivscriptimport { toRef } from vueexport default {setup() {const boy {name: 我是.,age: 10}const boy\_toRef toRef(boy, name) // 这个 boy\_toRef 就是被 toRef 函数操作过的 boy 的 name 值const btn () {boy\_toRef.value . // 把 name 修改成 .console.log(boy\_toRef) // 修改完成打印一下结果console.log(boy) // 修改完成打印一下boy结果}return { boy, btn, boy\_toRef }}}
script
保存代码刷新页面在点击按钮修改 name 值然后查看一下控制台打印的 boy 对象。 发现 boy 对象的 name 值已经从 我是. 改为 .了但是页面依旧没有更新。
记住了
toRef 函数会与源数据交互修改响应式数据会造成源数据的修改但是他的修改不会造成视图层数据的更新。
ref 函数验证
那 ref 函数可以将对象里面的属性值变成响应式的数据修改响应式数据是不会影响到源数据但是视图层上的数据会被更新 这句话是正确的嘛上一节我们没测试所以说在这里我们也测试一下。
我们还是写一个案例页面展示一个名称点击按钮修改页面名称。
divh1ref reactive 函数h1p姓名{{name\_ref}}pel-button typeprimary clickbtn修改信息el-buttondivscriptimport { ref } from vueexport default {setup() {const name 我是.const name\_ref ref(name)const btn () {name\_ref.value .console.log(name\_ref) // 打印一下被ref包裹的数据console.log(name) // 打印一下源数据}return { name\_ref, btn }}}
script
保存代码刷新页面点击按钮查看页面控制台打印的结果主要是看一下被 ref 函数包裹后的数据有没有修改成功源数据有没有修改成功最后页面有没有修改下面看截图。 OK通过上面截图顾忌大家都理解了吧
所以再记住
ref 函数可以将对象里面的属性值变成响应式的数据修改响应式数据是不会影响到源数据但是视图层上的数据会被更新
toRefs 函数
toRefs 函数的使用呢其实和 toRef 函数类似的哈。
toRefs 函数用于批量设置多个数据为相应是数据。toRefs 函数与原始数据相交互修改响应式数据会影响到源数据但是不会更新视图层。toRefs 函数还可以与其他响应式数据相交互更加方便处理视图层数据。
toRefs 函数使用
老样子创建一个对象然后使用 toRefs 函数包裹在页面展示一下。
divh1toRef toRefs 函数h1p姓名{{boy\_toRefs.name}}pp年龄{{boy\_toRefs.age}}pdivscriptimport { toRefs } from vueexport default {setup() {const boy {name: 我是.,age: 10}const boy\_toRefs toRefs(boy) // 将 boy 用 toRefs 包裹console.log(boy\_toRefs) // 打印一下结果return { boy\_toRefs }}}
script
保存代码刷新页面查看。 所以说我们修改修改一下代码在渲染的时候除了 .属性 之外还需要 .value。 姓名{{boy\_toRefs.name.value}}p年龄{{boy\_toRefs.age.value}}p
把视图层代码修改一下然后查看效果。 诶现在就是正常的啦
有人可能会疑问那这玩意儿整的不是越来越复杂了吗本来直接点属性就可以现在还得点属性点value不是多此一举脱裤子放P吗 嘿嘿嘿我觉得也是。
为什么呢说是多此一举也很正常因为前面的博文讲过这种复杂结构数据我们完全可以使用 reactive 函数来处理呀渲染最多点一次就可以但是 toRefs 函数却需要点两次。
divh1toRef toRefs 函数h1p姓名{{boy\_toRefs.name}}pp年龄{{boy\_toRefs.age}}pdivscriptimport { toRefs, reactive } from vueexport default {setup() {const boy {name: 我是.,age: 10}const boy\_toRefs reactive(boy)return { boy\_toRefs }}}
script
我们不使用 toRefs 函数而是用之前说的 reactive 函数处理数据。 我们可以看到页面是可以正常解析的那为什么我们还有舍近求远的使用 toRefs 函数呢
其实是有原因的呀
其实 toRefs 函数最大的用处在这里
我们这个 boy 对象里面只有两个参数比较少如果我们这个对象里面有十个参数或者是更多的话每次展示的时候都得写那么多遍的 boy 点是不是很麻烦呢所以说使用 toRefs 函数就可以解决这个问题看下面的代码。
divh1toRef toRefs 函数h1p姓名{{name}}pp年龄{{age}}pdivscriptimport { toRefs } from vueexport default {setup() {const boy {name: 我是.,age: 10}return { boy\_toRefs , ...toRefs(boy)}}}
script
在 return 抛出 reactive 的时候使用扩展运算符和 toRefs 函数就可以实现直接写属性的方式展示数据了。 但是呢深层次的对象依旧需要通过点来实现。
也许你还有疑问直接扩展运算 reactive 函数也行啊为啥要套上 toRefs 函数记住一点呀
toRefs 函数修改原始数据被改变页面不会被触发。
看下面代码
divh1toRef toRefs 函数h1p姓名{{name}}pp年龄{{age}}pel-button typeprimary clickbtn修改 nameel-buttondivscriptimport { toRefs, reactive } from vueexport default {setup() {const boy {name: 我是.,age: 10}const new\_toRefs toRefs(boy)const btn () {new\_toRefs.name.value .console.log(boy)}return { btn, ...toRefs(boy) }}}
script
打印一下结果 从打印结果中可以看出原始数据被改变页面没有被触发。但从我的写法上应该可以注意到toRefs 返回的对象随便解、随便构丝毫不会影响值的响应性。
总结
有的小伙伴可能还是不太理解这两个函数稍微总结一下子。
如果想让响应式数据和以前的数据关联起来并且想在更新响应式数据的时候不更新视图那么就使用 toRef 函数。如果希望将对象的多个属性都变成响应式数据并且要求响应式数据和原始数据关联并且更新响应式数据的时候不更新视图就使用 toRefs 函数用于批量设置多个数据为响应式数据。因为 toRef 函数一次仅能设置一个数据。toRefs 函数接收一个对象作为参数它会遍历对象身上的所有属性然后挨个调用 toRef 函数执行。
好了今天的内容大体就是这些了晚安宝子们明天见 Vue3 toRef 和 toRefs 函数 toRef 函数 toRef 函数使用 ref 函数验证 toRefs 函数 toRefs 函数使用 总结 __EOF__ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SefOyO4z-1656977492883)(https://blog.csdn.net/wjw1014)]我是 . - 本文链接 https://blog.csdn.net/wjw1014/p/16444682.html
关于博主 评论和私信会在第一时间回复。或者直接私信我。版权声明 本博客所有文章除特别声明外均采用 BY-NC-SA 许可协议。转载请注明出处声援博主 如果您觉得文章对您有帮助可以点击文章右下角**【[推荐](javascript:void(0)】**一下。
