vue3中的toRef 与ref 区别

最新推荐文章于 2024-06-29 11:48:26 发布
最新推荐文章于 2024-06-29 11:48:26 发布
阅读量469 收藏 1
点赞数 1
分类专栏： vue3 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52137798/article/details/118462101
版权

toRef

在这里插入图片描述

toRef是将start对象内的响应式的属性由proxy代理对象转换为ref 并且打印num 回返回ObjetRefImpl对象
在这里插入图片描述

我尝试使用点击事件改变num后
在这里插入图片描述
发现
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
toRef返回的num,改变num还会影响到start对象内的num ,所以我推断它们属于引用类型,并且start内的num变为即使结构赋值出来它也还是响应式的多亏toRef, 而toRefs是将所以内属性都可以结构,并且递归深度响应.
之后我又试着用ref
在这里插入图片描述
发现页面内
在这里插入图片描述
在这里插入图片描述
我点击点击之后start内对象的num不会跟随变化而变化,不是引用类型,互不影响

皮卡砖
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
【Vue3 第六章】ref、toRef、toRefs、toRaw 方法应用
前端知识分享喵
12-29 5713
ref、toRef、toRefs、toRaw 方法应用
Vue3 - toRef() 使用教程
王佳斌
11-15 2341
Vue3官方文档，vue3.js toRef 官方文档教程，vue3toRef，一文搞懂Vue3中toRef和toRefs函数的使用，vue3-(toRef,toRefs,toRaw)，Vue3如何理解ref, toRef和toRefs响应式数据方法，前端- toRaf和ref的区别，深入理解 Vue3 Reactivity API ，Vue3 - toRef() 使用教程。
ref与toRef的区别
m0_60622481的博客
02-15 2232
ref和toRef的区别(1)ref本质是拷贝，修改响应式数据不会影响原始数据；toRef的本质是引用关系，修改响应式数据会影响原始数据(2)ref数据发生改变，界面会自动更新；toRef当数据发生改变是，界面不会自动更新(3)toRef传参与ref不同；toRef接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性 ...
Vue 3.0源码系列之ref、toRef、toRefs
最新发布
weixin_45368328的博客
06-29 1412
/ 无法拦截对值的修改name = '巧君';对于ref是一个函数创建响应式，在Vue2.0中已经规范了架子，采用options data对象形式，所以不需要考虑这个原始值的问题，对于这个问题，Vue3的作者及core核心成员们，想到了一个办法，目前官方说是唯一的办法，使用一个非原始值去 “包裹” 原始值，例如我们可以使用对象来包装// 可以使用 Proxy 代理wrapper,简洁实现对原始值的拦截// 读取value// 修改值可以触发响应式name.value = '巧君';
vue3中ref与toRef的区别
u013594477的专栏
11-25 926
1、ref是复制,视图会更新 如果利用ref将某一个对象中的某一个属性值变成响应式数据 我们修改响应式数据是不会影响原始数据的; 同时视图会更新。 ref就是复制 复制是不会影响原始数据的 <template> <div> <div> <div>{{stateObj}}</div> <button @click="func1">按钮</button> </div> &
Vue3 学习笔记 —— toRef 跟 ref 的区别
叹之
05-06 374
toRef 返回一个对象属性的Ref对象，该Ref对象的value 跟原对象属性的值相耦合 ref 将一个数据包装成Ref对象，该Ref对象的value与原数据没有关联 示例： <template> <button @click="change">改变</button> </template> <script lang="ts"> import { defineComponent, ref, reactive, toRef} fro
Vue3中ref与toRef的区别
m0_56219678的博客
02-17 840
Vue3中ref与toRef的区别
vue3中ref和reactive的区别
weixin_45044349的博客
06-16 1209
参考资料 ref 先定义x，y为0，当使用函数时，再更新x和y的值 reactive 在pos中有两个key都为0，在函数中更新两个值pos.x = 2. x,y必须和对象在一起才能引用，如果像第三种const { x } = pos，先取出来，再进行更新，x还是旧的值，并且会丧失响应式 案例...
浅析Vue3中ref与reactive的使用和区别
m0_46627407的博客
06-28 2087
浅析vue3中ref和reactive使用和区别以及应用场景
Vue3中toRef的使用(彻底清楚搞懂toRef和toRefs是什么)
weixin_48952990的博客
06-06 2486
Vue3中toRef的使用
【JavaScript源代码】Vue3中ref与toRef的区别浅析.docx
12-29
在Vue3中，`ref`和`toRef`都是用于创建响应式数据的工具，但它们之间存在着重要的差异。理解这些差异对于有效地管理Vue3应用的状态至关重要。 首先，`ref`用于创建一个响应式的引用，它实际上是对一个值的封装。当...
vue3中ref的理解
热门推荐
weixin_47886687的博客
01-21 5万+
1.什么是ref? ref和reactive一样,也是用来实现响应式数据的方法 由于reactive必须传递一个对象,所以在实际开发中如果只是想让某个变量实现响应式的时候回非常麻烦 所以Vue3提供了ref方法实现简单值得监听 2.ref本质 ref底层其实还是reactive,所以当运行时系统会自动根据传入的ref转换成reactive. 3.ref注意点 在vue中使用ref的值不用通过value获取 在js中使用ref的值必须通过value获取 ...
Vue3 ref和reactive使用上的区别，toRef与toRefs函数
林中明月间丶
04-18 3075
https://www.cnblogs.com/kousum/p/14399280.html 在vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式
vue3.0 ref与toref的区别
a13145211的博客
12-22 1321
ref---->复制，修改响应式数据不会影响原始数据 toref---->引用，修改响应式数据，会影响原始数据 ref------>数据发生改变，界面就会自动更新 toref-----> 数据发生改变，界面也不会更新 torefs是影响多个参数 //torefs示例 let obj = { name:"11", age:18 } 但在实际开发中，用ref和reactive比较多！ ...
vue3中ref、toRef、toRefs的区别
qq_45716607的博客
11-28 549
vue3中ref、toRef、toRefs的区别
Vue3中ref,toRef,toRefs的区别与用法
Dax1_的博客
03-13 3050
ref vs toRef 如果利用ref函数将某个对象中的属性变成响应式数据，对其进行修改是不会影响原始数据的。 利用toRef进行上方操作，对数据的修改是响应式的 toRef vs toRefs toRef：创建一个ref对象，其value值指向另一个对象中的某个属性 toRef语法：const name = toRef(object , 'property') toRefs：功能与toRef一致，但可以批量创建多个ref对象 toRefs语法：toRefs(object) 他们的作用都是将响应式对
Vue3 ref
且听风吟的博客
04-22 1090
ref一般用来创建基本数据类型的响应式数据
【vue3】关于ref、toRef、toRefs那些事
嗨，朋友你好！我是前端领域的工作者
04-02 3428
vue3项目中关于ref、toRef、toRefs的使用详解
vue3中toref和torefs用法
03-21
在Vue 3中，`toRef`和`toRefs`是个非常有用的函数，用于在组合式API中处理响应式数据。 首先，让我们来介绍一下`toRef`函数。`toRef`函数接收两个参数：一个响应式对象和一个属性名。它的作用是创建一个指向响应式对象某个属性的ref对象。这意味着当该属性的值发生变化时，ref对象也会相应地更新。 下面是一个示例代码： ```javascript import { reactive, toRef } from 'vue'; const state = reactive({ name: 'John', age: 25, }); const nameRef = toRef(state, 'name'); console.log(nameRef.value); // 输出：John state.name = 'Alice'; console.log(nameRef.value); // 输出：Alice ``` 在上面的代码中，我们使用`toRef`函数创建了一个指向`state`对象中`name`属性的ref对象`nameRef`。当`state.name`的值发生变化时，`nameRef.value`也会相应地更新。 接下来，让我们来介绍一下`toRefs`函数。`toRefs`函数接收一个响应式对象作为参数，并返回一个包含该对象所有属性的普通对象，其中每个属性都是一个ref对象。 下面是一个示例代码： ```javascript import { reactive, toRefs } from 'vue'; const state = reactive({ name: 'John', age: 25, }); const refs = toRefs(state); console.log(refs.name.value); // 输出：John console.log(refs.age.value); // 输出：25 state.name = 'Alice'; console.log(refs.name.value); // 输出：Alice ``` 在上面的代码中，我们使用`toRefs`函数将`state`对象转换为一个包含所有属性的普通对象`refs`。通过`refs.name.value`和`refs.age.value`，我们可以访问到对应属性的值，并且当属性的值发生变化时，ref对象也会相应地更新。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值