Vue 侦听器实现

class Observer {
  constructor(value){
    this.value = value
    if(Array.isArray(value)){
      // 数组的逻辑
    }else {
      // 对象的逻辑
      this.walk(value)
    }
  }

  walk(obj) {
    const keys = Object.keys(obj)
    for(let i = 0;i <= keys.length;i++){
      defineReactive(obj,keys[i])
    }
  }
}

function defineReactive(obj,key){
  let val = obj[key]
  if(typeof val === 'object'){
    new Observer(val)
  }
  Object.defineProperty(obj,key,{
    get(){
      console.log(`${key}属性背读取了`)
      return val
    },
    set(newValue){
      console.log(`${key}的属性背修改了，新值为${newValue}`)
      val = newValue 
    }
  })
}

const obj = {
  a:1,
  b:2,
  c:{
    d:1
  }
}

const newObj = new Observer(obj)