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

旧城等待， 2021-07-24 14:07 520阅读 0赞

在处理器中只需要取消掉set和deleteProperty的功能即可

效果图:  
![在这里插入图片描述][20210411163104163.png]  
![在这里插入图片描述][20210411163107872.png]

代码示例:

//readonly相关处理器
    const readonlyHandler = { 
      get(target,property) { 
        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 shallowReadonly(target) { 
      if (target && typeof target === "object") { 
        return new Proxy(target,readonlyHandler)
      }
      return target;
    }
    
    const shallowRead = shallowReadonly({  a: 1, b: {  c: 2 } });
    // shallowRead.a++;
    // delete shallowRead.a;
    // shallowRead.b.c++;
    
    
    function readonly(target) { 
      if (target && typeof target === "object") { 
        if (Array.isArray(target)) { 
            target.forEach((item, index) => {  //遍历数组,当数组元素是对象情况
            target[index] = readonly(item); 
          })
        }else {  //对象情况
          Object.keys(target).forEach((key) => { //遍历对象,当对象属性中还有对象
            target[key] = readonly(target[key]);
          })
        }
        return new Proxy(target,readonlyHandler)
      }
      return target;
    }
    
    const readOnly = readonly({  a: 1, b: {  c: 2 } });
    // readOnly.a++;
    // delete readOnly.a;
    // readOnly.b.c++;
    // delete readOnly.b.c;

[20210411163104163.png]: /images/20210724/2267f49432284679991a21fb8c2ba20a.png
[20210411163107872.png]: /images/20210724/f0e8d1c76ac845bd8a24001586001fab.png