vue3.0 reactive和shallowReact响应式源码实现

shallowReact:
	因为只实现第一层,所以直接new Proxy代理即可
	
reactive:
	因为要实现深层次数据劫持,所以需要递归
		递归注意情况:
			当是普通值时,因为普通值所处的对象已经被Proxy代理,所以无需设置直接返回,
			如果是数组:需要遍历出数组中的对象,使其变成响应式的
			如果是对象:需要遍历出属性中的对象,使其变成响应式的

效果图:

代码示例:

//定义处理器
const reactiveHandler = {
  get(target,property) {
    console.log('读取了'+property+"属性")
    const result = Reflect.get(target, property);

    return result;
  },
  set(target, property, value) {
    console.log('设置了'+property+'属性')
    const result = Reflect.set(target, property, value);
    return result;
  },
  deleteProperty(target, property) {
    console.log('删除了' + property + "属性");
    const res = Reflect.deleteProperty(target, property);
    return res;
  }
}



function shallowReactive(target) {
  //判断目标对象类型
  if (target && typeof target === "object") {
    return new Proxy(target,reactiveHandler)
  }
  //基本类型直接返回
  return target
}



const shallow = shallowReactive({ a: 'jeff',b:{c:'tom'} });

delete shallow.a

function reactive(target) {
  //判断目标对象类型
  if (target && typeof target === "object") {
    if (Array.isArray(target)) { //数组情况
      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;
}

const deep = reactive({ a: 1, b: { c: 2 } });

deep.a++;
deep.b.c++;
delete deep.b.c