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

Posted 2022-02-03 web半晨

目录

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

---

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;