vue3手写shallowReadonly、浅只读

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];