尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
vue3 为什么需要toRef和toRefs
为什么在vue3中需要 toRef和toRefs先给一个最直接的答案这是响应式设计语言最底层上的根源缺陷(天生自带)。所以 toRef和toRefs就是为了弥补js语言而不得不打的补丁。下面深入看一下为什么一、JS 的值传递机制破坏了Proxy的拦截总所周知js数据类型分为基本数据类型和引用数据类型基本数据类型的值直接在栈内存中存储而引用数据类型存储在堆中并且变量保存的是地址不是原始值。搞清楚这一点后来看一下 解构的执行逻辑。js中不管对方是基本数据类型还是引用数据类型解构起到的是搬运操作。对于基本数据类型基本类型直接存储在栈内存Stack中占据固定大小的空间。解构时先得到该值所在位置然后JS 引擎在栈内存中开辟一块全新的空间把这个要解构的值复制进去。新变量指向这个新空间。修改新变量绝对不会影响源对象中的属性对于引用数据类型引用数据类型存储在堆内存Heap中占据不定大小空间栈内存只存一个指向堆内存的指针内存地址。解构时引擎取出的是栈中的指针地址比如 0xFF01。把这个地址复制给新变量新变量 b 和源对象属性指向堆内存中的同一块地址。因此修改新变量中数值源对象中也会变示例: 对 state 进行解构conststatereactive({count:0,name:Vue});const{count,name}state;根据解构原理来说 因为count 和name都是基础数据类型所以解构出来的 count和name 都是新值所以原来的proxy代理不生效。为了解决这个问题 vue3 引入了toRef 来解决来看一下简易源码classObjectRefImpl{getvalue(){// 每次你访问 .value我都去源对象上读取最新值returnthis._object[this._key];}setvalue(newVal){// 每次你设置 .value我都去修改源对象this._object[this._key]newVal;}}可以看出使用 toRef后之所以还能够保持响应式得主要原因toRef返回的根本不是响应式数据而是一个指向源对象属性的引用再来看下toRefsexportfunctiontoRefsTextendsobject(object:T):ToRefsT{// 如果不是 reactive 对象开发环境会警告但依然可以工作constresult:anyArray.isArray(object)?newArray(object.length):{};// 遍历对象的所有 keyfor(constkeyinobject){// 对每个 key 执行 toRef建立映射result[key]toRef(object,key);}returnresult;}其实toRefs就是批量执行了toRef把对象得所有属性变成ref。有了toRefs我们就能够很方便的构造出usexxx函数setup(){functionuseInfo(){conststatereactive({count:0,name:Vue});// 返回时用 toRefs 包裹模板中就可以直接写 {{ count }}无需写 state.countreturn{...toRefs(state)};}const{count,name}useInfo();}
RELATED

相关推荐

SpringBoot2+Vue3+MySQL 美食分享平台源码 前后端分离实战项目

SpringBoot2+Vue3+MySQL 美食分享平台源码 前后端分离实战项目

一、项目简介 本项目是一个基于 Spring Boot 2 Vue 3 MySQL 技术栈开发的前后端分离美食分享平台。系统采用经典的前后端分离架构,后端提供 RESTful API 接口,前端通过 Vue 3 单页应用进行交互。平台包含普通用户端和管理员端两大角色:普通…

📅 2026/11/15 5:47:44
Windows Defender一键禁用工具:如何彻底关闭系统防护提升电脑性能

Windows Defender一键禁用工具:如何彻底关闭系统防护提升电脑性能

Windows Defender一键禁用工具:如何彻底关闭系统防护提升电脑性能 【免费下载链接】windows-defender-remover A tool which is uses to remove Windows Defender in Windows 8.x, Windows 10 (every version) and Windows 11. 项目地址: https://gitcode.com/gh_…

📅 2026/10/4 18:35:50
树莓派驱动7.3英寸电子墨水屏:从SPI配置到信息看板实战

树莓派驱动7.3英寸电子墨水屏:从SPI配置到信息看板实战

1. 项目概述:一块能“留住画面”的屏幕如果你玩过树莓派,大概率折腾过各种屏幕,从普通的HDMI液晶屏到小巧的OLED。但有没有想过,有一种屏幕,它只在刷新内容时才耗电,一旦画面显示出来,即使拔掉电…

📅 2026/10/4 15:08:27
MORE NEWS

更多资讯

📰

电压证和电工证过期了怎么复审延期?值不值得考?实操指南来了

电压证和电工证过期了怎么复审延期?值不值得考?实操指南来了 证书过期了不知道怎么复审延期,这事儿在特种作业行业特别常见,尤其是电压证和电工证这类高频使用证书,很多人因为工作调动、证书遗失或忘记复审,导致证书失效。你是不是也在为这事发愁?别急…

📰

东山岛电工证怎么考,真实经历告诉你怎么避坑

东山岛电工证怎么考,真实经历告诉你怎么避坑 不知道去哪报名怕被中介坑,我来告诉你怎么搞定东山岛电工证,省心又省钱。很多人在考电工证的时候,被各种培训机构忽悠,结果花了几千块,最后连报名都没上,或者考了几次都没过,白白浪费时间和钱。我之前就遇…

📰

濮阳清丰电工证在哪办含金量高吗怎么准备实操考试不挂科

濮阳清丰电工证在哪办含金量高吗怎么准备实操考试不挂科 实操考试心里没底怕挂科,这几乎是每个准备考电工证的小伙伴都经历过的事。尤其在濮阳清丰这样的地方,电工证的 含金量…

📰

博罗电工证快速办理官方回应:外省证怎么转?老电工亲自告诉你

博罗电工证快速办理官方回应:外省证怎么转?老电工亲自告诉你 之前考的证在外省能不能转过来?这几乎是所有打算在博罗从事电工工作的小伙伴最关心的问题,尤其是像我这样从商丘转岗过来的,以前在老家考的低压电工证,到了博罗之后才发现,证件的有效性、考…

📰

庐江考电工证什么时间最新政策解读 官方报名入口全攻略

庐江考电工证什么时间最新政策解读 官方报名入口全攻略 不知道去哪报名怕被中介坑?别急,这篇文章给你说清楚庐江考电工证什么时间、怎么报、怎么防坑,官方报名入口也给你安排上。不管是刚入行还是想转行,电工证都是你必须拿下的“入场券”,尤其是特种作…

📰

高压电工证滨海县千万别踩坑,过期了不知道怎么复审延期怎么办

高压电工证滨海县千万别踩坑,过期了不知道怎么复审延期怎么办 证书过期了不知道怎么复审延期,这是很多人在拿到高压电工证后会遇到的问题。尤其是在滨海县,很多电工朋友因为工作变动、疏忽或者信息不对称,导致证书到期后无法及时办理复审,甚至面临被单位…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬