let obj = {
  hello: "hello111",
  world: 123,
  user: {
    name: 'vue',
    age: 4,
    blog: {
      title: "blog1",
      content: 888
    }
  }
}

function proxy(o, prefix = "") {
  let pv = {}
  for (let key in o) {
    if (o[key].constructor === Object) {
      pv[key] = proxy(o[key], `${prefix}${key}.`)
    }
  }

  let p = new Proxy(o, {
    get(target, key) {
      let val = Reflect.get(target, key)
      if (val.constructor === Object) {
        return pv[key]
      } else {
        console.log(`get ${prefix}${key}: `, val)
        return val
      }
    },
    set(target, key, val) {
      Reflect.set(target, key, val)
      console.log(`set ${prefix}${key}: `, val)
      if (val.constructor === Object) {
        pv[key] = proxy(val, `${prefix}${key}.`)
      }
    },
    deleteProperty(target, key) {
      Reflect.deleteProperty(target, key)
      delete pv[key]
    }
  })
  return p
}

console.log(JSON.stringify(obj, "  ", 2))

obj = proxy(obj)

console.log("===============")

console.log(obj.hello)
obj.hello = "hello222"
console.log(obj.hello)

console.log(obj.world)
obj.world = 456
console.log(obj.world)

console.log("===============")

console.log(obj.user.name)
obj.user.name = "vuex"
console.log(obj.user.name)

console.log(obj.user.age)
obj.user.age = 18
console.log(obj.user.age)

console.log("===============")

console.log(obj.user.blog.title)
obj.user.blog.title = "blog111"
console.log(obj.user.blog.title)

console.log(obj.user.blog.content)
obj.user.blog.content = 999
console.log(obj.user.blog.content)

console.log("===============")

console.log(obj.user.blog)
obj.user.blog = {title: "blog333", content: 999}
console.log(obj.user.blog)
console.log(obj.user.blog.title)
console.log(obj.user.blog.content)

console.log(obj.user.blog.title)
obj.user.blog.title = "blog111"
console.log(obj.user.blog.title)

console.log(obj.user.blog.content)
obj.user.blog.content = 999
console.log(obj.user.blog.content)