vue3手写shallowReactive、浅的劫持、浅的监视、浅的响应数据

1、函数实现

// 定义一个reactiveHandler处理对象 const reactiveHandler = { // 获取属性值 get(target, prop) { if (prop === '_is_reactive') return true; const result = Reflect.get(target, prop); console.log('拦截了读取数据', prop, result); return result; }, // 修改属性值或者是添加属性 set(target, prop, value) { const result = Reflect.set(target, prop, value); console.log('拦截了修改数据或者是添加属性', prop, value); return result; }, // 删除某个属性 deleteProperty(target, prop) { const result = Reflect.deleteProperty(target, prop); console.log('拦截了删除数据', prop); return result; } } // 定义一个shallowReactive函数，传入一个目标对象 function shallowReactive(target) { // 判断当前的目标对象是不是object类型(对象/数组) if (target && typeof target === 'object') { return new Proxy(target, reactiveHandler); } // 如果传入的数据是基本类型的数据，那么就直接返回 return target; } 

2、函数调用

const proxyUser1 = shallowReactive({ name: '小明', car: { color: 'red' } }); // 拦截到了读和写的数据 proxyUser1.name += '=='; // 拦截到了读取数据，但是拦截不到写的数据 proxyUser1.car.color + '=='; // 拦截到了删除数据 delete proxyUser1.name; // 只拦截到了读，但是拦截不到删除 delete proxyUser1.car.color;