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();}

vue3 为什么需要toRef和toRefs

相关推荐

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

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

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

更多资讯

SpringCloud Gateway 跨域 OPTIONS 被拦？让 Codex 走 TaoToken 查 globalcors

IntelliJ IDEA 闪退排查全攻略：从 JVM 参数到插件冲突的系统化方法

将 Codex 架构图 Skill 的 endpoint 换 TaoToken 再出图

VSCode+clangd 搞定 Android/Linux 大工程代码跳转

vscode 插件装不上？TaoToken 这样改 Codex 的通道配置

CRMEB移动端二开核心：容器组件选型与实战优化指南

今日更新

校园网认证计费模式详解：AAA与代拨架构、原理及排障

Spring Boot+Vue垃圾分类毕设：分层、权限与排错实战

把 Cline 的 Base URL 改到 TaoToken 之后，DeepSeek 仍能修调试配置

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？