js实现shallowReactive和reactive

// shallowReactive(浅的监视，浅的劫持，浅的响应式数据)与reactive（深的）

// 定义一个reactiveHandler处理对象
let reactiveHandler = {
  // 获取属性值
  get(target, prop) {
    // 这里的result返回1
    const result = Reflect.get(target, prop)
    console.log('拦截到get', prop, result)
    return result

  },
  // 修改属性值或是添加属性
  set(target, prop, value) {
    // 这里的result返回true
    const result = Reflect.set(target, prop, value)
    console.log('拦截到set', prop, value, result)
    return result
  },
  // 删除某个属性
  deleteProperty(target, prop) {
    // 这里的result返回true
    const result = Reflect.deleteProperty(target, prop)
    console.log('拦截到deleteProperty', prop, result)
    return result
  }
}

// 定义一个shallowReactive函数，传入一个目标对象
function shallowReactive(target) {
  // 两种情况，如果是单值，就直接反回，如果数据类型是object，就给属性添加proxy
  if (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
  }
}