【Vue3】toRefs与toRef的使用

最新推荐文章于 2025-06-26 09:02:26 发布
最新推荐文章于 2025-06-26 09:02:26 发布
阅读量1.2k 收藏 9
点赞数 16
CC 4.0 BY-SA版权
分类专栏： vue从入门到实战 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36977923/article/details/138203443
本文介绍了Vue中的toRefs函数，用于将对象内值转换为响应式数据，同时提供了单个值和多个值的转换示例，以及一个错误案例，展示了直接解构非响应式对象会导致失去响应性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

toRefs简介

toRefs对对象内多个值转换成响应式数据
代码展示

 let testData = reactive({
        aa:"111",
        bb:"222",
        cc:"333"
    })
    //转为响应式数据
    let {aa,bb,cc} = toRefs(testData)
    
    console.log(aa);
    console.log(bb);
    console.log(cc);

toRef简介

toRef对对象内单个值转换成响应式数据

let testData1 = reactive({
        aa:"111",
        bb:"222",
        cc:"333"
    })
    //转为响应式数据
    let newData = toRef(testData1,'aa')
    console.log(newData);//222

错误案例

let testData1 = reactive({
        aa:"111",
        bb:"222",
        cc:"333"
    })
    //直接解构testData对象,创建的新值是没有响应式效果
    let {aa,bb,cc} = testData

✨ 踩坑不易，还希望各位大佬支持一下 \textcolor{gray}{踩坑不易，还希望各位大佬支持一下} 踩坑不易，还希望各位大佬支持一下

📃 个人主页： \textcolor{green}{个人主页：} 个人主页： 沉默小管

📃 个人网站： \textcolor{green}{个人网站：} 个人网站： 沉默小管

📃 个人导航网站： \textcolor{green}{个人导航网站：} 个人导航网站： 沉默小管导航网

📃 我的开源项目： \textcolor{green}{我的开源项目：} 我的开源项目： vueCms.cn

🔥 技术交流 Q Q 群： 837051545 \textcolor{green}{技术交流QQ群：837051545} 技术交流QQ群：837051545

👍 点赞，你的认可是我创作的动力！ \textcolor{green}{点赞，你的认可是我创作的动力！} 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！ \textcolor{green}{收藏，你的青睐是我努力的方向！} 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！ \textcolor{green}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！

如果有不懂可以留言，我看到了应该会回复
如有错误，请多多指教

【前端】【vue】torefs与toref全解，原理与作用，与`reactive` 和 `ref`的区别
Sapphire521的博客
03-06 96
toRefs是一个用于将reactive对象中的每个属性转换为ref的方法。这样，您可以在解构reactive对象时保留它的响应式特性。它的作用是确保解构后的对象依然是响应式的，而不是丢失响应式绑定。
【Vue3 入门到实战】4. toRefs、toRef与computed计算属性
qq_58195504的博客
01-16 858
toRefs将一个响应式对象中的每一个属性，转换为 ref 对象。计算属性会根据其依赖的数据自动更新，并且具有缓存机制，只有在其依赖的数据发生变化时才会重新计算。
# Vue3 toRef 和 toRefs 函数
xuhss_com的博客
07-05 3087
上一篇博文介绍了 vue3 里面的 ref 函数和 reactive 函数，实现响应式数据，今天主要来说一下 toRef 函数和 toRefs 函数的基本使用。通过上一篇博客，我们知道，ref 函数可以创建一个响应式的数据，那 toRef 函数同样也是创建一个响应式的数据，那么他们之间的区别是什么呢？首先一点，ref 函数他的本质其实是去拷贝一份数据，脱离了与源数据的交互。什么意思呢？就是 ref 函数可以将对象里面的属性值变成响应式的数据，修改响应式数据，是不会影响到源数据，但是视图层上的数据会被更新。但
Vue3 toRef
且听风吟的博客
04-26 969
toRef 可以用来为一个 reactive 对象的属性创建一个 ref，这个 ref 可以被传递并且能够保持响应性。
Vue3 中 toRef 与 toRefs 的深度解析与实战应用
最新发布
2301_81137804的博客
06-26 1335
在 Vue3 的响应式系统中，toRef 和 toRefs 是两个非常重要的工具函数。它们主要用于处理 响应式对象的属性提取与解构，确保在操作这些属性时不会失去响应性。本文将从功能、区别、使用场景和代码示例等多个角度，深入解析 toRef 和 toRefs 的核心原理与实际应用。
vue3 toRef
xihuanLilia的博客
05-27 343
toRef作用语法案例toRefs 作用 创建一个 ref 对象，其value值指向另一个对象（reactive）中的某个属性。 语法 const name = toRef(指向的对象,'读取的属性') 案例 <!-- toRef --> <template> <input type="text" v-model="people.name"> <input type="text" v-model="people.age"> <input type="
Vue3的toRef
longtengg1的博客
12-24 2521
更改person.age的值时， 通过ref(person.age)得到的age1不会改变，因为ref是复制，拷贝了一份新的数据值单独操作, 更新时相互不影响 通过toRef(person,‘age’)得到的age2会改变，因为 toRef是引用。它为源响应式对象上的某个属性创建一个 ref对象, 二者内部操作的是同一个数据值, 更新时二者是同步的 setup() { let person =reactive( { name: "long",age:23 }); let age1 =
vue3toRef
qq_48018288的博客
07-06 5660
vue3toRef
Vue 3 中的 toRef 与 toRefs：使用与案例解析
一起coding，一起嗨。
01-26 820
Vue 3 中的 toRef 与 toRefs：使用与案例解析
【Vue3】ToRef 和 ToRefs
又言又语
07-20 556
本文介绍 Vue3 中ToRef和ToRefs的用法。toRef和toRefs用于将reactive定义的响应式数据对象中的属性转换成ref定义，既保留了属性的响应式行为，也保留了引用，即更新ref定义的响应式数据会同步更新其对应的reactive响应式数据对象中的原属性。其中toRef指定转换单个属性，toRefs可以配合 JavaScript 解构赋值转换多个属性。
Vue3 理解 toRef 和 toRefs 的作用、用法、区别
热门推荐
Thinking anywhere anytime.
12-01 3万+
Vue3 轻松理解 toRef 和 toRefs 的作用、用法、区别，并举例一些简单案例。
vue3中的toRef
qq_44777163的博客
06-06 296
button @click="btn">点击更新视图层某一个数据</button><h1>ref的数据：{{ref_in}}</h1><h1>姓名：{{obj.name}}</h1><h1>年龄：{{obj.age}}</h1>ref_in.value++//视图中的数据变了。const obj={name:'马云',age:50}console.log(num)//源数据不变。const ref_in=ref(num)//复制进来。// res.value='马化腾'const num=0//源数据。
Vue3的toRef函数
weixin_59423550的博客
09-29 305
toRefs和toRef
Vue3 toRef、toRefs
Errol's Blog
04-20 898
toRef 作用：创建一个 ref 对象，其 value 值指向另一个对象中的某个属性。 语法：const nane = toRef(person, ' name ') 应用：要将响应式对象中的某个属性单独提供给外部使用时 扩展：toRefs 与 toRef 功能一致，但可以批量创建多个 ref 对象 语法：toRefs(person) 在 Vue3的响应式 中，我们写了一段 js 来模拟 vue3 的响应式 <script> //源数据 let person =
vue3之toRef、toRefs
06-07 2434
作用： 创建一个ref对象，其value值指向另一个对象中的某个属性语法： const name = toRef(person, 'name')应用： 要将响应式对象中的某个属性单独供应给外部使用时扩展： toRefs与toRef功能一致，但可以批量创建多个ref对象，语法：toRefs(person)
vue3----toRef、toRefs
qq_43470725的博客
08-21 373
vue3
vue3 toRef函数和toRefs函数
wuxing164的博客
11-19 3万+
这篇我们看下toRef和toRefs的基本使用 我们知道ref可以用于创建一个响应式数据，而toRef也可以创建一个响应式数据，那他们之间有什么区别呢？ 事实上，如果利用ref函数将某个对象中的属性变成响应式数据，修改响应式数据是不会影响到原始数据。 import {ref} from 'vue'; export default { name:'App' setup(){ let obj = {name : 'alice', age : 12}; let newObj= ref(...
学习记录509@vue3之toRef()或者toRefs()
教练我想学编程
12-10 505
为了简化取值，为了实现响应式，必须要套toRef()或者toRefs() <template> <h4>{{person}}</h4> <h2>姓名：{{name}}</h2> <h2>年龄：{{age}}</h2> <h2>薪资：{{job.j1.salary}}K</h2> <button @click="name+='~'">修改姓名</button> &.
vue3 torefs 和 toref
10-17
`toRefs` 和 `toRef` 都是 Vue 3 中的 Composition API 中的函数，用于将响应式对象转换为普通对象或将普通对象转换为响应式对象。 `toRefs` 可以将一个响应式对象的所有属性都转换为普通对象，每个属性都是一个 ref 对象，这样就可以在模板中使用解构语法来访问这些属性。例如： ```javascript import { reactive, toRefs } from &#39;vue&#39; const state = reactive({ count: 0, message: &#39;Hello World&#39; }) export default { setup() { const { count, message } = toRefs(state) return { count, message } } } ``` 在模板中使用： ```html <template> <div> <p>Count: {{ count }}</p> <p>Message: {{ message }}</p> </div> </template> ``` `toRef` 则是将一个普通对象的某个属性转换为 ref 对象，这样就可以在模板中使用解构语法来访问这个属性。例如： ```javascript import { ref, reactive, toRef } from &#39;vue&#39; const state = reactive({ count: 0, message: &#39;Hello World&#39; }) export default { setup() { const countRef = toRef(state, &#39;count&#39;) return { count: countRef } } } ``` 在模板中使用： ```html <template> <div> <p>Count: {{ count }}</p> </div> </template> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沉默小管

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值