Vue如何实现响应式系统

let value = obj[prop] // 闭包绑定依赖
let dep = new Dep()
Object.defineProperty(obj, prop, {
configurable: true,
enumerable: true,
get() {
//利用js单线程，在get时绑定订阅者
if (Dep.target) {
// 绑定订阅者
dep.addSub(Dep.target)
}
return value
},
set(newVal) {
value = newVal
// 更新时，触发订阅者更新
dep.notify()
}
})
// 对象监听
if (typeof value === 'object' && value !== null) {
Object.keys(value).forEach(valueProp => {
reactive(value, valueProp)
})
}
}

Dep

class Dep {
  constructor() {
    this.subs = []  }
  addSub(sub) {
    if (this.subs.indexOf(sub) === -1) {
      this.subs.push(sub)
    }
  }
  notify() {
    this.subs.forEach(sub => {
      const oldVal = sub.value
      sub.cb && sub.cb(sub.get(), oldVal)
    })
  }
}

Watcher

class Watcher {
  constructor(data, exp, cb) {
    this.data = data
    this.exp = exp
    this.cb = cb
    this.get()
  }
  get() {
    Dep.target = this
    this.value = (function calcValue(data, prop) {
      for (let i = 0, len = prop.length; i < len; i++ ) {
        data = data[prop[i]]      }
      return data
    })(this.data, this.exp.split('.'))
    Dep.target = null
    return this.value
  }
}

参考文档：https://cn.vuejs.org/v2/guide/reactivity.html