[JavaScript知识库]VUE响应式原理-Observer类

class Observer{
  // 接受传入的对象，将这个对象转换为getter/setter  
  constructor(data) {
    this.data = data
    // 遍历数据
    this.walk(data)
  }
  // 封装用于数据遍历的方法
  walk(data) {
    // 将遍历后的数据都转换成getter/setter
    Object.keys(data).forEach(key => {
      this.convert(key, data[key])
    })
  }
  // 封装用于将对象转换成响应式的方法
  convert(key, value) {
   defineReactive(this.data, key, value)
  }
}

function defineReactive(data, key, value) {
  // 创建消息中心
  const dep = new Dep()
  observer(value)  
  // 进行数据劫持
  Object.defineProperty(data,key, {
    enumerable: true,
    configurable: true,
    get() {
      console.log("获取了属性")
      Dep.target && dep.addSub(Dep.target)
      return value
    },
    set(newValue) {
      if(newValue === value) return
      console.log("设置了属性")
      value = newValue
      observer(value)
      // 数据发生变化时 通知消息中心
      dep.notify()
    }
  })
}

function observer(value) {
    // 检测数据是否为对象,如果是对象，则创建一个新的observe进行管理
    if(typeof value === 'object' && value !== null) {
      return new Observer(value)
    }
}