observe

写了一个简单的监听object get的拦截器，最近在读vue源码，有些看似简单的，其实内藏玄机。比如去监听 const a = {b: {c: 1}}, a.b.c 为什么vue会生成三个dep，a.b, b, b.c 我现在只是生成了两个监听，剩下的问题留下以后再想明白。

const a = { a: {b: 1, e: {f: 0}},c: {d: 3} }

let startCollect = false

function observe(obj, key, value) {
  value = obj[key]
  const property = Reflect.getOwnPropertyDescriptor(obj, key)
  Object.defineProperty(obj, key, {
    get: function () {
      if (startCollect) {
        console.log('get', key, value)
      }
      return property.get?.call(obj) || value
    },
    set: function (newValue) {
      console.log('set', key)
      value = newValue
    }
  })
}

function addObserve(obj) {
  for (let key in obj) {
    observe(obj, key)
    const value = obj[key]
    if (typeof value === 'object') {
      addObserve(value)
    }
  }
}

addObserve(a)
startCollect = true
a.a.b