vue的Observer简化版

class Observer {
  constructor(value) {
    if (!value || typeof value !== 'object') return
    this.walk(value) // 对对象的所有属性进行遍历并定义响应式
  }

  walk (obj) {
    Object.keys(obj).forEach(key => defineReactive(obj, key, obj[key]))
  }
}
// 定义核心方法 defineReactive
function defineReactive (target, key, value) {

  new Observer(value) // 如果值还是对象，则继续对其子属性进行观察

  Object.defineProperty(target, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      return value
    },
    set: function reactiveSetter (newVal) {
      if (newVal === value) return
      value = newVal
      new Observer(value) // 新值如果是对象，也需要对其进行观察
    }
  })
}

let observer = {
  name: 'observer',
  age: 18,
  tempObj: {
    n: 1,
    m: 2
  }
}

new Observer(observer)

console.dir(observer)