vue3中的 toRef 和toRefs

最新推荐文章于 2024-07-20 16:20:36 发布
最新推荐文章于 2024-07-20 16:20:36 发布
阅读量709 收藏
点赞数
文章标签： vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MCCLS/article/details/120295060
版权

之前我们的案例中

修改person对象  而且setup return 一个 person 会发现模板中都需要重复写person

 

 

然后如果你直接在return上进行数据的处理,就会发现数据都丢失了响应式

 其实很简单,就是这边的person.name就是一个基本类型数据了,当它被赋值到另一个数据上,那个数据发生改变也会对源数据发生更改

 

 

这时我们就要用到toRef了 就是要把一个不是ref的东西变成ref的东西

给不是ref对象使用会生成一个对应的ref对象

 

所以我们可以这样写

 

 

这边要注意如果再次使用ref就相当于在自己创建了一个ref对象,进行响应式,也就是person源数据不会跟着响应 

 然后你会发现一个问题如果使用ref 如果想把对象里面的所有属性进行给进行响应,就会写很多代码

 

解决:使用refs只需要一个参数

即会把对应的引用对象里面的属性,都会变成一个个的ref对象,就是实现了数据的响应

 

 

此时我们联合扩展运算符

由于我们知道torefs返回的是一个对象里面有许多个ref对象(只有对象中第一层的属性),所以我们只需要...把它展开

 注意的是

这样写在模板中可以直接写的是对象中的第一层数据

而之后的数,还是需要.的方式进行读取,不能直接写

 

兜里揣着星星
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
# Vue3 toRef 和 toRefs 函数.doc
07-11
Vue3 中的 toRef 和 toRefs 函数详解 在 Vue3 中，响应式数据是一种非常重要的概念，它使得我们的应用程序能够实时更新数据，从而提高用户体验。那么，在 Vue3 中，我们如何创建响应式数据呢？这篇文章将介绍 Vue3 ...
Vue3 理解 toRef 和 toRefs 的作用、用法、区别
热门推荐
cookcyq__的博客
12-01 3万+
Vue3 轻松理解 toRef 和 toRefs 的作用、用法、区别，并举例一些简单案例。
# Vue3 toRef 和 toRefs 函数
xuhss_com的博客
07-05 2921
上一篇博文介绍了 vue3 里面的 ref 函数和 reactive 函数，实现响应式数据，今天主要来说一下 toRef 函数和 toRefs 函数的基本使用。通过上一篇博客，我们知道，ref 函数可以创建一个响应式的数据，那 toRef 函数同样也是创建一个响应式的数据，那么他们之间的区别是什么呢？首先一点，ref 函数他的本质其实是去拷贝一份数据，脱离了与源数据的交互。什么意思呢？就是 ref 函数可以将对象里面的属性值变成响应式的数据，修改响应式数据，是不会影响到源数据，但是视图层上的数据会被更新。但
【Vue3】ToRef 和 ToRefs
最新发布
又言又语
07-20 365
本文介绍 Vue3 中ToRef和ToRefs的用法。toRef和toRefs用于将reactive定义的响应式数据对象中的属性转换成ref定义，既保留了属性的响应式行为，也保留了引用，即更新ref定义的响应式数据会同步更新其对应的reactive响应式数据对象中的原属性。其中toRef指定转换单个属性，toRefs可以配合 JavaScript 解构赋值转换多个属性。
vue3之toRef、toRefs
06-07 2335
作用： 创建一个ref对象，其value值指向另一个对象中的某个属性语法： const name = toRef(person, 'name')应用： 要将响应式对象中的某个属性单独供应给外部使用时扩展： toRefs与toRef功能一致，但可以批量创建多个ref对象，语法：toRefs(person)
Vue3中toRef以及toRefs的基本使用
m0_56219678的博客
02-16 9473
Vue3中toref以及torefs的基本使用
VUE3 响应式 API 之 toRef 与 toRefs
m0_49515138的博客
12-08 2299
相信各位开发者看到这里时，应该已经对 ref 和 reactive API 都有所了解了，为了方便开发者使用， Vue 3 还推出了两个与之相关的 API ： toRef 和 toRefs ，都是用于 reactive 向 ref 转换。这两个 API 在拼写上非常接近，顾名思义，一个是只转换一个字段，一个是转换所有字段，转换后将得到新的变量，并且新变量和原来的变量可以保持同步更新。然后分别看看这两个 API 应该怎么使用。
vue3自己的学习笔记
01-25
toRef 和 toRefs 是 Vue 3 中两个特殊的函数，toRef 函数可以将响应式对象中的某个属性单独提供给外部使用，而 toRefs 函数可以将响应式对象转换为普通对象，其中每个属性都是原始对象相应属性的 ref。 ...
vue-3-playground
03-31
在`vue-3-playground-main`中，你可以找到示例代码，展示如何使用setup()函数来引入Composition API，并利用ref、reactive、toRef和toRefs等工具管理响应式数据。 另外，Vue 3 引入了Teleport，这是一个全新的概念...
vue3+全家桶项目实战.zip
07-20
Vue3中的Vuex4也进行了升级，与Vue3更加兼容，提供了更好的性能和API设计。在项目中，你将学习如何创建store，定义mutations、actions和getters，以及如何在组件中注入和使用store状态。同时，还将涉及Vuex的模块化...
Vue3+Axios基础例子
11-06
同时，Vue3引入了`toRef`和`toRefs`，帮助用户更方便地将对象的属性转换为Ref。 5. **模板语法更新**：Vue3支持模板内的模板字符串，以及在v-if和v-for中的表达式。 6. **Fragment和Suspense**：Vue3原生支持...
Vue 3 中，toRefs和toRef
标准都是留给不爱的人，爱的本质是自由意志的沉沦
07-06 546
则是将指定属性从响应式对象中提取出来，创建一个单独的 ref 对象，用于对该属性进行单独的绑定和访问。创建的 ref 对象与原始属性相关联，对 ref 对象的修改会影响到响应式对象中的属性，反之亦然。作用：创建一个 ref 对象，该 ref 对象绑定到响应式对象的指定属性。是两个常用的函数，用于处理响应式对象和 ref 对象之间的相互转换。作用：将响应式对象转换为具有相同响应式能力的 ref 对象集合。将响应式对象转换为 ref 对象集合后，可以直接使用。的 ref 对象集合，以方便对每个属性进行访问；
移动网页唤起手机内 支付宝 微信支付
weixin_39593730的博客
09-28 3662
本文链接：https://blog.csdn.net/qq_36710522/article/details/90483194 业务场景介绍： H5移动端支持微信支付 [ 微信支付分为微信内支付（JSAPI支付官方API）和微信外支付（H5支付官方API）] && 支付宝支付 [手机网站支付转 APP 支付 官方API ] 订单生成逻辑：前端请求后端提交订单，后端去和微信或者支付宝...
Vue3中toRef函数与toRefs函数
weixin_58173188的博客
07-21 465
一、toRef函数 二、toRefs函数
Vue3 toRef与toRefs
前端开发小白9527
04-08 1490
1 toRef: 作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。 语法：const name = toRef(person,'name') 应用: 要将响应式对象中的某个属性单独提供给外部使用时。 按照传统的方式我们在setup中返回的对象 在模板显示 需要对象.属性名的形式 正常写法： <template> <div> <h2> 人的信息</h2> <p>姓名 {{p
Vue3 toRef 和 toRefs 函数
大家好，我是+V
07-04 3279
上一篇博文介绍了 vue3 里面的 ref 函数和 reactive 函数，实现响应式数据，今天主要来说一下 toRef 函数和 toRefs 函数的基本使用。通过上一篇博客，我们知道，ref 函数可以创建一个响应式的数据，那 toRef 函数同样也是创建一个响应式的数据，那么他们之间的区别是什么呢？首先一点，ref 函数他的本质其实是去拷贝一份数据，脱离了与源数据的交互。什么意思呢？就是 ref 函数可以将对象里面的属性值变成响应式的数据，修改响应式数据，是不会影响到源数据，但是视图层上的数据会被更新。但
【vue3】toRef与toRefs的使用，toRef与ref的区别
花椒和蕊的博客
10-01 2201
【vue3】toRef与toRefs的使用，toRef与ref的区别
VUE3----toRef与toRefs
王延朕的博客
04-09 223
作用:创建一个ref对象,其value值指向另一个对象中的某个属性 语法:const name = toRef(person,‘name’) 应用:要将响应式对象中的某个属性单独提供给外部使用时 扩展:toRefs与toRef功能一致,但可以批量创建多个ref对象,语法:toRefs(person) <template> <h4>{{ person }}</h4> <h2>姓名:{{ name }}</h2> <h2>年.
vue3中toref和torefs
08-18
在Vue 3中，`toRef`和`toRefs`是两个与响应式相关的函数。 `toRef`函数用于创建一个指向响应式对象属性的ref。它接收两个参数：第一个参数是一个响应式对象，第二个参数是一个字符串，表示该对象的属性名。`toRef`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值