为什么在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先给一个最直接的答案这是响应式设计语言最底层上的根源缺陷(天生自带)。所以 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();}
