vue3响应式Object代理对象的读取示例详解
正文
从这一章开始，作者将更新深入的讲解响应式，尤其是vue3响应式的具体的实现。其实在前面一章，如果你仔细阅读，你是可以实现一个简单的响应式函数的，类似于@vue/reactive,当然那只是个demo，是个玩具，我能不能在生产环境上去使用的，它差了太多功能和边界条件。
现在，我们才是真正的深入@vue/reactive。
在vue中，obj.a是一个读取操作，但是仔细想来，读取这个操作很宽泛。
obj.a // 访问一个属性 'a' in obj // 判断对象或者原型链上是否存在a for ... in //循环遍历对象 for ... of //循环遍历数组
书中并没有些for...of，但我觉得这个应该也属于读取操作，它在js内部的实现估计应该和for...in很相似。
读取属性
其实这个我们之前已经实现过来，就是通过Proxy拦截Get操作.至于为什么要用Reflect，上上一篇文章也给出了原因。
const obj = {a:1}
const p = new Proxy(obj,{
get(target,key,receiver){
track(target,key)
return Reflect.get(target,key,receiver)
}
})
xx in obj
通过查询ECMA文档得知，in操作符的运算结果是通过一个HasProperty方法读取的
而这个方法对应的在Proxy内部，就是has方法。
因此我们只需要增加has拦截即可,同事对于Reflect,也有has方法。
for ... in
这块会比前面稍微复杂一点 通过查询ECMA文档,在这篇文章里，规定了如何把一个对象转变为一个迭代器，这里写了一个demo，我们可以很清晰的发现，它遍历了Reflect.ownKeys(obj)
const ITERATE_KEY=symbol()
const p = new Proxy(obj,{
ownKeys(target){
track(target,ITERATE_KEY)
return Reflect.ownKeys(target)
}
}
由于ownKeys的入参里只有target，因此我们构造一个唯一值ITERATE_KEY作为追踪依赖的key.这里还有一个小坑，后续我们在set的时候再看
看这篇文章其实比较费劲，因为作者大量引用了ECMA-262的文档，我以前从不看这个，也是第一次知道。其实这个才是最权威的JS文档，所有的JS的定义、行为规范，每个函数应该怎么样执行，以后也建议大家没事看看这个文档。 tc39.es/ecma262/mul…
以上就是vue3响应式Object代理对象的读取示例详解的详细内容，更多关于vue响应式Object读取的资料请关注脚本之家其它相关文章！
相关文章
发中会有要获取当前日期的需求,有的是获取到当前月份,有的是精确到分秒,在 Vue 开发中,获取当前时间是一项常见的需求,本文将深入探讨Vue获取当前系统日期(年月日),帮助您更好地利用当前时间,需要的朋友可以参考下2024-01-01
小编在开发使经常会碰到全局切换问题，今天小编给大家带来一篇教程给大家介绍vue 全局环境切换问题，感兴趣的朋友一起看看吧2019-10-10
vue3+element-plus Dialog对话框的使用与setup 写法的用法
这篇文章主要介绍了vue3+element-plus Dialog对话框的使用 与 setup 写法的使用,本文通过两种方式结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了Vue 页面权限控制和登陆验证功能的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
今天小编就为大家分享一篇vue 实现强制类型转换 数字类型转为字符串，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了关于Vue CLI3中启动cli服务参数说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue 路由懒加载，当打包构建应用时，JavaScript 包会变得非常大，影响页面加载，这便是vue 路由懒加载，接下来随小编一起进入文章了解更多详细内容吧2021-10-10
这篇文章主要为大家详细介绍了vue实现列表的添加点击，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
Vuex是一个专为Vue.js应用程序开发的状态管理模式,下面这篇文章主要给大家介绍了关于vuex安装失败解决的方法,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要为大家详细介绍了vue绑定设置属性的多种方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
最新评论