Javascript

关于vue3中ref和reactive思考

本文主要是介绍关于vue3中ref和reactive思考,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

因为新开了一个项目使用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

这篇关于关于vue3中ref和reactive思考的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!