vue3手写shallowReadonly浅只读

Posted 2022-02-03 web半晨

目录

• 1、函数实现
• 2、函数调用

---

1、函数实现

// 定义了一个readonlyHandler处理器
const readonlyHandler = 
  get(target, prop) 
    if (prop === '_is_readonly') return true;
    const result = Reflect.get(target, prop);
    console.log('拦截到了读取数据了', prop, result);
    return result;
  ,
  set(target, prop, value) 
    console.warn('只能读取数据，不能修改数据或者添加数据');
    return true;
  ,
  deleteProperty(target, prop) 
    console.warn('只能读取数据，不能删除数据');
    return true;
  


// 定义一个shallowReadonly函数
function shallowReadonly(target) 
  // 需要判断当前的数据是不是对象
  if (target && typeof target === 'object') 
    return new Proxy(target, readonlyHandler);
  
  return target;

---

2、函数调用

const proxyUser3 = shallowReadonly(
      name: '小明',
      cars: ['奔驰', '宝马']
);
// 可以读取
console.log(proxyUser3.name);
// 不能修改
proxyUser3.name = '==';
// 不能删除
delete proxyUser3.name;
// 拦截到了读取,可以修改
proxyUser3.cars[0] = '奥迪';
// 拦截到了读取,可以删除
delete proxyUser3.cars[0];