手写shallowReactive 与 reactive

shallowReactive只处理了对象内最外层属性的响应式(也就是浅响应式)，判断传入的target是不是对象，是的话就返回一个该普通对象的第一层响应式代理器对象（通过get，set）

reactive 接收一个普通对象然后返回该普通对象的响应式代理器对象，深响应式的话，判断传入的target是不是对象，对该对象中的所有数据进行reactive的递归处理，继续判断是对象还是数组，是数组的话，通过递归让其下标每一个属性都变成一个响应式代理器对象，对象的话也如此

const reactiveHandler = {
		  get (target, prop) {
		   const result = Reflect.get(target, key, value)
		   console.log('拦截到了读取数据',prop,result)
		    return result
		  },
		
		  set (target, key, value) {
		    const result = Reflect.set(target, key, value)
		    console.log('拦截到了修改数据或者增加属性',key,value)
		    return result
		  },
		
		  deleteProperty (target, key) {
		    const result = Reflect.deleteProperty(target, key)
		    console.log('数据已删除, 去更新界面')
		    return result
		  },
		}
		
		/* 
		自定义shallowReactive
		*/
		function shallowReactive(obj) {
		  return new Proxy(obj, reactiveHandler)
		}
		
		/* 
		自定义reactive
		*/
		function reactive (target) {
		  if (target && typeof target==='object') {
		    if (target instanceof Array) { 
			// 判读是否是数组，是数组的话，让数组下标的每一个属性都是响应式对象
		      target.forEach((item, index) => {
		        target[index] = reactive(item)
		      })
		    } else { // 对象也如此
		      Object.keys(target).forEach(key => {
		        target[key] = reactive(target[key])
		      })
		    }
		
		    const proxy = new Proxy(target, reactiveHandler)
		    return proxy
		  }
		
		  return target
		}
		
		
		/* 测试自定义shallowReactive */
		const proxy = shallowReactive({
		  a: {
		    b: 3
		  }
		})
		
		proxy.a = {b: 4} // 劫持到了
		proxy.a.b = 5 // 没有劫持到
		
		
		/* 测试自定义reactive */
		const obj = {
		  a: 'abc',
		  b: [{x: 1}],
		  c: {x: [11]},
		}
		
		const proxy = reactive(obj)
		console.log(proxy)
		proxy.b[0].x += 1
		proxy.c.x[0] += 1