经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue3响应式Object代理对象的读取示例详解
来源:jb51  时间:2022/8/2 12:45:24  对本文有异议

正文

从这一章开始,作者将更新深入的讲解响应式,尤其是vue3响应式的具体的实现。其实在前面一章,如果你仔细阅读,你是可以实现一个简单的响应式函数的,类似于@vue/reactive,当然那只是个demo,是个玩具,我能不能在生产环境上去使用的,它差了太多功能和边界条件。

现在,我们才是真正的深入@vue/reactive

在vue中,obj.a是一个读取操作,但是仔细想来,读取这个操作很宽泛。

  1. obj.a // 访问一个属性
  2. 'a' in obj // 判断对象或者原型链上是否存在a
  3. for ... in //循环遍历对象
  4. for ... of //循环遍历数组

书中并没有些for...of,但我觉得这个应该也属于读取操作,它在js内部的实现估计应该和for...in很相似。

读取属性

其实这个我们之前已经实现过来,就是通过Proxy拦截Get操作.至于为什么要用Reflect上上一篇文章也给出了原因。

  1. const obj = {a:1}
  2. const p = new Proxy(obj,{
  3. get(target,key,receiver){
  4. track(target,key)
  5. return Reflect.get(target,key,receiver)
  6. }
  7. })

xx in obj

通过查询ECMA文档得知,in操作符的运算结果是通过一个HasProperty方法读取的

而这个方法对应的在Proxy内部,就是has方法。

因此我们只需要增加has拦截即可,同事对于Reflect,也有has方法。

for ... in

这块会比前面稍微复杂一点 通过查询ECMA文档,在这篇文章里,规定了如何把一个对象转变为一个迭代器,这里写了一个demo,我们可以很清晰的发现,它遍历了Reflect.ownKeys(obj)

  1. const ITERATE_KEY=symbol()
  2. const p = new Proxy(obj,{
  3. ownKeys(target){
  4. track(target,ITERATE_KEY)
  5. return Reflect.ownKeys(target)
  6. }
  7. }

由于ownKeys的入参里只有target,因此我们构造一个唯一值ITERATE_KEY作为追踪依赖的key.这里还有一个小坑,后续我们在set的时候再看

看这篇文章其实比较费劲,因为作者大量引用了ECMA-262的文档,我以前从不看这个,也是第一次知道。其实这个才是最权威的JS文档,所有的JS的定义、行为规范,每个函数应该怎么样执行,以后也建议大家没事看看这个文档。 tc39.es/ecma262/mul…

以上就是vue3响应式Object代理对象的读取示例详解的详细内容,更多关于vue响应式Object读取的资料请关注w3xue其它相关文章!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号