当前位置 : 主页 > 网络编程 > JavaScript >

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

来源:互联网 收集:自由互联 发布时间:2023-02-08
正文 前文中讲完了如何响应Object,并处理了一些响应中的问题,但是我们目前,包括之前实现的响应式,其实只是浅响应。 直接上代码 const obj = {a:{b:1}}const reactive = (obj)= new Proxy(obj,{

正文

前文中讲完了如何响应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中实现过渡动画效果示例代码
下一篇:没有了
网友评论