// shallowReactive(浅的监视，浅的劫持，浅的响应式数据)与reactive（深的）// 定义一个reactiveHandler处理对象
let reactiveHandler = {// 获取属性值get(target, prop) {// 这里的result返回1const result = Reflect.get(target, prop)console.log('拦截到get', prop, result)return result},// 修改属性值或是添加属性set(target, prop, value) {// 这里的result返回trueconst result = Reflect.set(target, prop, value)console.log('拦截到set', prop, value, result)return result},// 删除某个属性deleteProperty(target, prop) {// 这里的result返回trueconst result = Reflect.deleteProperty(target, prop)console.log('拦截到deleteProperty', prop, result)return result}
}// 定义一个shallowReactive函数，传入一个目标对象
function shallowReactive(target) {// 两种情况，如果是单值，就直接反回，如果数据类型是object，就给属性添加proxyif (target && typeof target === "object") {return new Proxy(target, reactiveHandler)} else {return target}
}// 定义一个reactive函数，传入一个目标对象
function reactive(target) {// 判断当前的目标对象是不是object类型（数组/对象）if (target && typeof target === "object") {// 先判断当前的数据是不是数组if (Array.isArray(target)) {// 数组的数据要进行遍历target.forEach((item, i) => {target[i] = reactive(item)})} else {// 如果是对象Object.keys(target).forEach(key => {target[key] = reactive(target[key])})}} else {// 如果传入的数据类型是基本数据类型，那么就直接返回return target}
}