彻底清楚搞懂toRef和toRefs是什么，也许你知道toRef和toRefs，一直有点蒙蔽，一直没搞懂它，看完这篇文章你彻底清楚

首先我们知道为什么要用toRef和toRefs，这篇文章让你彻底搞懂

比如我们使用 reactive来创建一个对象

<script>
import {reactive} from "vue";
export default {name: 'Toreftemp',components: {},setup(){let listData = reactive({title: '2021年vue3你还不会吗，那你Out了',content: "撒看到啦奥斯卡大奖阿斯顿阿斯顿",list: {shareNUm: 20,countall: 15}})return{listData}}
}
</script>

我们需要在模板中使用，那就得 listData.各种才能使用，listData.title listData.content

<template><div><h1>toRef和toRefs</h1><div><h2>{{listData.title}}</h2><P>{{listData.content}}</P><span>分享次数:{{listData.list.shareNUm}}</span><span>收藏次数:{{listData.list.countall}}</span></div></div>
</template>

这样就显得很难受，不是不可以，有的小伙伴灵机一动。改造一下数据不就完事，已title标题为例

   return {title: listData.title,content: listData.content,}

这样那我在模板中不是直接就用{{title}}完事，没错是可以的，但是问题来了，你修改数据的时候，你会发现你的UI没有跟新，傻了吧，

其实这已经是一个新的对象了，相当于进行了解构赋值，返回的对象已经不再是一个响应式对象了，而是一个新的普通对象，

从而我们就可以使用toRef和toRefs来解决这个问题，

1. 首先先看toRef
里面有两个参数。参数一为一个响应对象，参数二为参数一这个对象中的某个属性。并将这个属性扎转换为响应式数据。

<script>import {reactive,toRef} from "vue";export default {name: 'Toreftemp',components: {},setup(){let listData = reactive({title: '2021年vue3你还不会吗，那你Out了',content: "撒看到啦奥斯卡大奖阿斯顿阿斯顿",list: {shareNUm: 20,countall: 15}})return{title: toRef(listData, 'title'),content: toRef(listData, 'content'),shareNUm: toRef(listData.list, 'shareNUm'),countall: toRef(listData.list, 'countall')}}
}
</script>

模板中使用

<template><div><h1>toRef和toRefs</h1><div><h2>{{title}}</h2><P>{{content}}</P><span>分享次数:{{shareNUm}}</span><span>收藏次数:{{countall}}</span></div></div></template>

然而，假如我们的对象中有几百个属性那怎么办，那不是得写疯了，从而toRefs就用到了

.2.在看toRefs

<template><div><h1>toRef和toRefs</h1><div><h2>{{title}}</h2><P>{{content}}</P><span>分享次数:{{list.shareNUm}}</span><span>收藏次数:{{list.countall}}</span></div></div></template><script>import {reactive,toRef,toRefs} from "vue";export default {name: 'Toreftemp',components: {},setup(){let listData = reactive({title: '2021年vue3你还不会吗，那你Out了',content: "撒看到啦奥斯卡大奖阿斯顿阿斯顿",list: {shareNUm: 20,countall: 15}})return{...toRefs(listData)}}
}
</script>

哇是不是恍然大悟，原来就是这样哦，没错就是这样，

你可以看以下element ui plus 的部分组建级联选择器

用法这就是上面所写的

彻底清楚搞懂toRef和toRefs是什么，也许你知道toRef和toRefs，一直有点蒙蔽，一直没搞懂它，看完这篇文章你彻底清楚相关推荐

神了！！看完这篇文章我不仅学会了手撸vue三开关组件，还搞懂了父子组件传值
神了!!看完这篇文章我不仅学会了手撸vue三开关组件,还搞懂了父子组件传值引子前置知识什么是vue组件父子组件传值父传子子传父 model选项的引入三开关组件(three-switch) ...
[转帖]看完这篇文章你还敢说你懂JVM吗？
看完这篇文章你还敢说你懂JVM吗? 在一些物理内存为8g的服务器上,主要运行一个Java服务,系统内存分配如下:Java服务的JVM堆大小设置为6g,一个监控进程占用大约 600m,Linux自身使用 ...
看完这篇文章，我奶奶都懂了https的原理
Http存在的问题上过网的朋友都知道,网络是非常不安全的.尤其是公共场所很多免费的wifi,或许只是攻击者的一个诱饵.还有大家平时喜欢用的万能钥匙,等等.那我们平时上网可能会存在哪些风险呢? 1.泄 ...
android adc按键原理,看完这篇文章，终于搞懂了ADC的原理及分类！
在仪器仪表系统中,常常需要将检测到的连续变化的模拟量如:温度.压力.流量.速度.光强等转变成离散的数字量,才能输入到计算机中进行处理.这些模拟量经过传感器转变成电信号(一般为电压信号),经过放大器放大 ...
还不了解什么是商业智能（BI）？看完这篇文章就懂了
随着新一代信息化.数字化技术和应用的飞速发展,各行各业都开始掀起了新一轮的科技革命和产业革命,这也反过来加快了信息化.数字化在社会各方面的传播速度,扩大了影响力.这种情况下,作为第五大生产要素的数据得 ...
触摸传感器的电路图符号_如何看懂汽车电路常用图形符号，看完这篇文章就懂了...
汽车电器的电原理图主要由各种单元电路组成,各单元电路又由各种元器件根据不同功能的需要组合而成.因此,要想轻松看懂汽车电器电路图,首先要认识电路图中各种元器件(零部件)的符号并懂得一些与其有关的基本知识 ...
Python学了可以干嘛？到底赚钱吗？看完这篇文章你就懂了
最近几年python越来越火,但很多小伙伴们还不知道python是什么?学习python有什么用?学会之后能做什么? 简单地说,python是最简单,最好学,零基础也可以学习的语言. 那么学pytho ...
秋招能有多卷？看完这篇文章你就懂了
我从来没想过我这个专业会这么卷,卷到飞起先说一下我们商业分析专业,无外乎两个方向:Data science方向,往数据分析走:Advisory方向,往咨询.行业分析.用户分析.战略分析走. 结果好家 ...
日立服务器显示屏哪里买,不知道买什么面板的显示器？看完这篇文章你就懂了...
目前市面上主流的显示器都是LCD,也就是液晶显示器,而目前市场上有许多种类的液晶显示器,比如TN屏.IPS屏还有VA屏等等.那么这些不同种类的面板究竟是在哪些地方上面有区别?各自又有什么样的特性?这篇 ...

彻底清楚搞懂toRef和toRefs是什么，也许你知道toRef和toRefs，一直有点蒙蔽，一直没搞懂它，看完这篇文章你彻底清楚

彻底清楚搞懂toRef和toRefs是什么，也许你知道toRef和toRefs，一直有点蒙蔽，一直没搞懂它，看完这篇文章你彻底清楚相关推荐

最新文章

热门文章