5.5 浅响应与深响应

function createReactive(obj, isShallow = false) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      if (key === 'raw') return target

      const res = Reflect.get(target, key, receiver)
      track(target, key) // 建立联系

      // 浅响应：直接返回原始值，不做任何包装
      if (isShallow) return res

      // 深响应：属性值是对象时，递归包装成响应式数据
      if (typeof res === 'object' && res !== null) {
        return reactive(res)
      }
      return res
    },
    // set / has / ownKeys / deleteProperty 与 5.4 相同
  })
}

// 深响应
function reactive(obj) {
  return createReactive(obj)
}

// 浅响应
function shallowReactive(obj) {
  return createReactive(obj, true)
}

const obj = reactive({ foo: { bar: 1 } })

effect(() => {
  console.log(obj.foo.bar)
})

obj.foo = { bar: 2 } // 能触发：foo 是第一层属性
obj.foo.bar = 3      // 深响应下也能触发（浅响应下不能）