vue3手写reactive、深的劫持、深的监视、深的响应数据

1、函数实现

// 定义一个reactive函数，传入一个目标对象 function reactive(target) { // 判断当前的目标对象是不是object类型(对象/数组) if (target && typeof target === 'object') { // 对数组或者是对象中所有的数据进行reactive的递归处理 // 先判断当前的数据是不是数组 if (Array.isArray(target)) { // 数组的数据要进行遍历操作0 target.forEach((item, index) => { // 如果数组中还有数组 // 使用递归 target[index] = reactive(item); }); } else { // 再判断当前的数据是不是对象 // 对象的数据也要进行遍历的操作 Object.keys(target).forEach(key => { target[key] = reactive(target[key]); }); } return new Proxy(target, reactiveHandler); } // 如果传入的数据是基本类型的数据，那么就直接返回 return target; } // 定义一个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; } } 

2、调用函数

const proxyUser2 = reactive({ name: '小明', car: { color: 'red' } }); // 拦截到了读和修改的数据 proxyUser2.name += '=='; // 拦截到了读和修改的数据 proxyUser2.car.color = '=='; // 拦截了删除 delete proxyUser2.name; // 拦截到了读和拦截到了删除 delete proxyUser2.car.color;