这应该是最详细的响应式系统讲解了

// html
<input type="text" id="input">
<span id="span"></span>

// js
let input = document.getElementById('input')
let span = document.getElementById('span')
input.addEventListener('keyup', function(e) {
 span.innerHTML = e.target.value
})

// 操作obj数据来驱动更新
let obj = {}
let input = document.getElementById('input')
let span = document.getElementById('span')
Object.defineProperty(obj, 'text', {
 configurable: true,
 enumerable: true,
 get() {
  console.log('获取数据了')
  return obj.text
 },
 set(newVal) {
  console.log('数据更新了')
  input.value = newVal
  span.innerHTML = newVal
 }
})
input.addEventListener('keyup', function(e) {
 obj.text = e.target.value
})

// 需要劫持的数据
let data = {
 a: 1,
 b: {
  c: 3
 }
}

// 劫持数据data
observer(data)

// 监听订阅数据data的属性
new Watch('a', () => {
  alert(1)
})
new Watch('a', () => {
  alert(2)
})
new Watch('b.c', () => {
  alert(3)
})

// 定义一个类供传入监听数据
class Observer {
 constructor(data) {
  let keys = Object.keys(data)
  for (let i = 0; i < keys.length; i++) {
   defineReactive(data, keys[i], data[keys[i]])
  }
 }
}
// 使用Object.defineProperty
function defineReactive (data, key, val) {
 // 每次设置访问器前都先验证值是否为对象，实现递归每个属性
 observer(val)
 // 劫持数据属性
 Object.defineProperty(data, key, {
  configurable: true,
  enumerable: true,
  get () {
   return val
  },
  set (newVal) {
   if (newVal === val) {
    return
   } else {
    data[key] = newVal
    // 新值也要劫持
    observer(newVal)
   }
  }
 })
}

// 递归判断
function observer (data) {
 if (Object.prototype.toString.call(data) === '[object, Object]') {
  new Observer(data)
 } else {
  return
 }
}

// 监听obj
observer(data)

class Watch {
 // 第一个参数为表达式，第二个参数为回调函数
 constructor (exp, cb) {
  this.exp = exp
  this.cb = cb
 }
}

class Watch {
 // 第一个参数为表达式，第二个参数为回调函数
 constructor (exp, cb) {
  this.exp = exp
  this.cb = cb
  data[exp]  // 想想多了这句有什么作用
 }
}

class Dep {
 constructor () {
  // 定义一个收集对应属性依赖的容器
  this.subs = []
 }
 // 收集依赖的方法
 addSub () {
  // Dep.target是个全局变量，用于存储当前的一个watcher
  this.subs.push(Dep.target)
 }
 // set方法被触发时会通知依赖
 notify () {
  for (let i = 1; i < this.subs.length; i++) {
   this.subs[i].cb()
  }
 }
}

Dep.target = null

class Watch {
 constructor (exp, cb) {
  this.exp = exp
  this.cb = cb
  // 将Watch实例赋给全局变量Dep.target，这样get中就能拿到它了
  Dep.target = this
  data[exp]
 }
}

function defineReactive (data, key, val) {
 observer()
 let dep = new Dep() // 新增：这样每个属性就能对应一个Dep实例了
 Object.defineProperty(data, key, {
  configurable: true,
  enumerable: true,
  get () {
   dep.addSub() // 新增：get触发时会触发addSub来收集当前的Dep.target，即watcher
   return val
  },
  set (newVal) {
   if (newVal === val) {
    return
   } else {
    data[key] = newVal
    observer(newVal)
    dep.notify() // 新增：通知对应的依赖
   }
  }
 })
}

let uid = 0 // 新增：定义一个id
class Dep {
 constructor () {
  this.id = uid++ // 新增：给dep添加id，避免Watch重复订阅
  this.subs = []
 }
 depend() { // 新增：源码中在触发get时是先触发depend方法再进行依赖收集的，这样能将dep传给Watch
  Dep.target.addDep(this);
 }
 addSub () {
  this.subs.push(Dep.target)
 }
 notify () {
  for (let i = 1; i < this.subs.length; i++) {
   this.subs[i].cb()
  }
 }
}

class Watch {
 constructor (exp, cb) {
  this.depIds = {} // 新增：储存订阅者的id，避免重复订阅
  this.exp = exp
  this.cb = cb
  Dep.target = this
  data[exp]
  // 新增：判断是否订阅过该dep，没有则存储该id并调用dep.addSub收集当前watcher
  addDep (dep) { 
   if (!this.depIds.hasOwnProperty(dep.id)) {
    dep.addSub(this)
    this.depIds[dep.id] = dep
   }
  }
  // 新增：将订阅者放入待更新队列等待批量更新
  update () {
   pushQueue(this)
  }
  // 新增：触发真正的更新操作
  run () {
   this.cb()
  }
 }
}

function Observer (data) {
 let dep = new Dep()
 return new Proxy(data, {
  get () {
   // 如果订阅者存在，进去depend方法
   if (Dep.target) {
    dep.depend()
   }
   // Reflect.get了解一下
   return Reflect.get(data, key)
  },
  set (data, key, newVal) {
   // 如果值未变，则直接返回，不触发后续操作
   if (Reflect.get(data, key) === newVal) {
    return
   } else {
    // 设置新值的同时对新值判断是否要递归监听
    Reflect.set(target, key, observer(newVal))
    // 当值被触发更改的时候，触发Dep的通知方法
    dep.notify(key)
   }
  }
 })
}

// 递归监听
function observer (data) {
 // 如果不是对象则直接返回
 if (Object.prototype.toString.call(data) !== '[object, Object]') {
  return data
 }
 // 为对象时则递归判断属性值
 Object.keys(data).forEach(key => {
  data[key] = observer(data[key])
 })
 return Observer(data)
}

// 监听obj
Observer(data)

vm._watcher = new Watcher(vm, () => {
 vm._update(vm._render(), hydrating)
}, noop)

// 使用Set数据结构创建一个队列，这样可自动去重
let queue = new Set()

// 在属性出发set方法时会触发watcher.update，继而执行以下方法
function pushQueue (watcher) {
 // 将数据变更添加到队列
 queue.add(watcher)
 // 下一个tick执行该数据变更,所以nextTick接受的应该是一个能执行queue队列的函数
 nextTick('一个能遍历执行queue的函数')
}

// 用Promise模拟nextTick
function nextTick('一个能遍历执行queue的函数') {
 Promise.resolve().then('一个能遍历执行queue的函数')
}

// queue是一个数组，所以直接遍历执行即可
function flushQueue () {
 queue.forEach(watcher => {
  // 触发watcher中的run方法进行真正的更新操作
  watcher.run()
 })
 // 执行后清空队列
 queue = new Set()
}

// 设置一个是否触发了nextTick的标识
let waiting = false
function pushQueue (watcher) {
 queue.add(watcher)
 if (!waiting) {
  // 保证nextTick只触发一次
  waiting = true
  nextTick('一个能遍历执行queue的函数')
 }
}

// 定义队列
let queue = new Set()

// 供传入nextTick中的执行队列的函数
function flushQueue () {
 queue.forEach(watcher => {
  watcher.run()
 })
 queue = new Set()
}

// nextTick
function nextTick(flushQueue) {
 Promise.resolve().then(flushQueue)
}

// 添加到队列并调用nextTick
let waiting = false
function pushQueue (watcher) {
 queue.add(watcher)
 if (!waiting) {
  waiting = true
  nextTick(flushQueue)
 }
}