标签：return target value reactive vue3 ref 赋值

因为新开了一个项目使用vue3，不太熟悉，其中使用了ref和reactive关键字，简单翻看文档和一些讲解之后，知道ref的实现是reactive。但使用中reactive()修饰的变量，不能直接对数组进行赋值操作，ref()却可以，这个问题感到很奇怪。

记录一下现在自己的想法

因为vue3是用proxy对整个对象的劫持，使用的是reflect去操作整个对象

Reflect.set(target, prop, value[, receiver])

问题应该就是出在这个方法上。假设target是一个数组，如果反射的方法直接使用，只传递一个target参数的情况下，确实可以赋值成功，变成一个[ undefined: undefined ]

但是VUE中是直接使用了解构方法

 1 function reactive(obj) {
 2   const handler = {
 3     get(target, prop, receiver) {
 4       return value
 5     },
 6     set(target, key, value, receiver) {
 7       return Reflect.set(...arguments)
 8     }
 9   }
10 
11   return new Proxy(obj, handler)
12 }

如第7行所示，这样一来在proxy = []这个赋值操作时，是不成功的，所以赋值reactive无效。但ref在外部重新包了一层value属性，所以直接对.value操作可以成功。

主要是多了一个对象。

这个想法不对!

参考：

https://www.bilibili.com/video/BV1ab4y1t74X?spm_id_from=333.999.0.0

https://www.bilibili.com/video/BV1kq4y1f7Sw?p=5

标签：return,target,value,reactive,vue3,ref,赋值
来源： https://www.cnblogs.com/zau11berer/p/16172548.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。