vue3.0 isReadonly、isRef、isReactive和isProxy响应式源码实现

柔情只为你懂 2021-07-24 19:44 388阅读 0赞

ref判断:
    	往返回的对象中添加一个_is_ref:true的标识
    
    isReadonly和isReactive都是Proxy代理的:
    	故在对应的Proxy处理器的get中,添加属性property==='_is_reactive'判断,并返回true,故通过访问_is_reactive属性标识即可
    
    isProxy判断为isReadonly或isReactive即可

代码示例:

function ref(target) { 
      if (target && typeof target === "object") { 
        target = reactive(target);
        return target;
      }
    
      return { 
        _is_ref:true,
        _value: target,
        get value() { 
          console.log('读取数据');
          return this._value;
        },
        set value(val) { 
          console.log('修改数据');
          this._value = val;
        }
      }
    }
    
    const reactiveHandler = { 
      get(target, property) { 
        
        if (property === "_is_reactive") return true;
    
        console.log('读取了'+property+"属性")
        const result = Reflect.get(target, property);
    
        return result;
      },
      set(target, property, value) { 
        console.log('设置了'+property+'属性')
        const result = Reflect.set(target, property, value);
        return result;
      },
      deleteProperty(target, property) { 
        console.log('删除了' + property + "属性");
        const res = Reflect.deleteProperty(target, property);
        return res;
      }
    }
    
    //readonly相关处理器
    const readonlyHandler = { 
      get(target, property) { 
        if (property === "_is_reactive") return true;
        console.log('读取了'+property+"属性")
        const result = Reflect.get(target, property);
    
        return result;
      },
      set(target, property, value) { 
        console.log("只能读取,不能修改属性"+property);
        
      },
      deleteProperty(target, property) { 
        console.log("只能读取,不能删除属性"+property);
      }
    }
    
    function isRef(obj) { 
      return obj && obj._is_ref; //_is_ref为标识,给之前创建时添加该标识即可判断
    }
    
    function isReactive(obj) { 
      return obj && obj._is_reactive;
    }
    
    function isReadonly(obj) {  //reactive和readonly都是使用代理
      return obj && ob._is_reactive;
    }
    
    function isProxy(obj) { 
      return isReactive(obj) || isReadonly(obj);
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，388人围观）

还没有评论，来说两句吧...

相关阅读

相关【手撸vue源码】深入响应式原理

目标 > 了解Vue内在的响应式原理 > 用原生js实现Vue响应式效果写在前面写在前面：最近对vue 也算是情有独钟（毕竟还要靠吃饭），发现vue 真的

ゝ一纸荒年。/ 2023年02月26日 09:25/ 0 赞/ 66 阅读

相关 Vue.js 源码剖析-响应式原理 part1

目标 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

柔情只为你懂/ 2023年01月08日 04:29/ 0 赞/ 140 阅读

相关实现Vue响应式原理

Vue的数据双向绑定，响应式原理，其实就是通过Object.defineProperty()结合发布者订阅者模式来实现的。我们可以先试着拆分一下Vue的核心模块。 1.

我不是女神ヾ/ 2022年11月14日 00:49/ 0 赞/ 252 阅读

相关 Vue源码解读一：Vue数据响应式原理

这方面的文章很多，但是我感觉很多写的比较抽象，本文会通过举例更详细的解释。（此文面向的Vue新手们，如果你是个大牛，看到这篇文章就可以点个赞，关掉页面了。）通过阅读这

电玩女神/ 2022年06月01日 03:51/ 0 赞/ 304 阅读

相关 vue源码—02vue2响应式原理defineProperty

![20190506111119926.png][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

深藏阁楼爱情的钟/ 2022年04月25日 06:12/ 0 赞/ 293 阅读

相关 Vue源码循序渐进-数据响应式原理

Vue作为一种MVVM框架，能够实现数据的双向绑定，让Vue技术栈的前端从业者摆脱了繁琐的DOM操作，这完全得益于Vue框架开发者对原生Object对象的深度应用。Vue实

ゝ一纸荒年。/ 2021年12月15日 02:55/ 0 赞/ 301 阅读

相关 vue3.0 reactive和shallowReact响应式源码实现

shallowReact: 因为只实现第一层,所以直接new Proxy代理即可 reactive: 因为要实现深层次数据劫持,

男娘i/ 2021年07月24日 19:52/ 0 赞/ 366 阅读

相关 vue3.0 isReadonly、isRef、isReactive和isProxy响应式源码实现

ref判断: 往返回的对象中添加一个_is_ref:true的标识 isReadonly和isReactive都是Proxy代理的:

柔情只为你懂/ 2021年07月24日 19:44/ 0 赞/ 389 阅读

相关 vue3.0 shallowRef和ref响应式源码实现

ref和reactive相比,ref通过setter和getter进行数据劫持代码示例: function shallowRef(target) {

刺骨的言语ヽ痛彻心扉/ 2021年07月24日 17:13/ 0 赞/ 347 阅读

相关 vue3.0 shallowReadonly和readonly响应式源码实现

在处理器中只需要取消掉set和deleteProperty的功能即可效果图: ![在这里插入图片描述][20210411163104163.png] ![在

旧城等待，/ 2021年07月24日 14:07/ 0 赞/ 636 阅读