VueJS设计与实现之浅响应与深响应详解_vue.js_

正文

前文中讲完了如何响应Object，并处理了一些响应中的问题，但是我们目前，包括之前实现的响应式，其实只是浅响应。

直接上代码

const obj = {a:{b:1}} const reactive = (obj)=> new Proxy(obj,{ get(target,key,receiver){ /*省略其他逻辑*/ return Reflect.get(target,key,receiver) }, /*省略其他拦截*/ }) const data = reactive(obj) 

问题就出现在Reflect.get(target, key, receiver)这句代码里，我们现在尝试一下获取data.a，应该返回的是{b:1}，不是Proxy,自然不会响应什么。

所以对于这种嵌套对象，我们自然要去递归的把对象转换为响应式对象。

const reactive = (obj)=> new Proxy(obj,{ get(target,key,receiver){ /*省略其他逻辑*/ const res = Reflect.get(target,key,receiver) if(res && typeof res === 'object'){ return reactive(res) } return res }， /*省略其他拦截*/ }) 

这样，当内部是嵌套对象的时候，我们递归把嵌套对象转换为响应式对象，这样再按之前的追踪依赖，触发响应去处理就好了。

当时，深响应和浅响应都是有各自的使用条件的。比如我在完成第一个vue3.2项目有感中写过，我就比较喜欢用shallowRef，这就是一种浅响应。

好了，话题收回来。我们之前封装的那个reactive已经变成一个深响应了，我们现在就在封装一层，去区分浅响应和深响应。我们通过一个新的参数deepify去判断浅响应和深响应，然后深响应的时候才去递归。

之所以再封装了一层，是因为我们后续还要继续扩展这个函数

const createReactive = (obj,deepify = true)=>new Proxy(obj,{ get(target,key,receiver){ /*省略其他逻辑*/ const res = Reflect.get(target,key,receiver) //深响应式递归 if(deepify && res && typeof res === 'object'){ return reactive(res) } return res }， /*省略其他拦截*/ }) 

这样子封装之后，我们就有了2个函数reactive,shallowReactive

const reactive = (obj)=>createReactive(obj) const shallowReactive = (obj)=>createReactive(obj,false) 

大家使用的时候，其实需要看情况去选择，浅响应其实有时候比深响应更方便。就比如我之前在那篇文章中举得例子一样。

以上就是VueJS设计与实现之浅响应与深响应详解的详细内容，更多关于VueJS浅响应深响应的资料请关注其它相关文章！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！