VueJS设计与实现之浅响应与深响应详解
更新时间：2022年08月11日 11:25:12 作者：冒菜师
这篇文章主要为大家介绍了VueJS设计与实现之浅响应与深响应详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
正文
前文中讲完了如何响应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浅响应深响应的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要给大家介绍了关于Vue科学计数法常见处理方法的相关资料,科学计数法是科学家用来表示很大或很小的数字的一种方便的方法,文中给出了详细的代码示例,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了Vue中select下拉框的默认选中项的三种情况解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vscode自定义vue模板的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章给大家介绍了vue数据传递的方法，包括，父组件向子组件传值 ，子组件向父组件传值 ，路由传值等多种方法，需要的朋友参考下2018-04-04
这篇文章主要介绍了vue 授权获取微信openId操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
自带气泡提示的vue校验插件（vue-verify-pop）
这篇文章主要为大家详细介绍了自带气泡提示的vue校验插件，vue-verify-pop的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要介绍了vue+iview的菜单与页签的联动方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-07-07
这篇文章主要为大家详细介绍了vue实现动态控制表格列的显示隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
本文主要介绍了ElementUI中el-tabs事件绑定的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要介绍了vue 检测用户上传图片宽高的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
最新评论