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

前言

本文从一个简单的双向绑定开始，逐步升级到由defineProperty和Proxy分别实现的响应式系统，注重入手思路，抓住关键细节，但愿能对你有所帮助。

1、极简双向绑定

首先从最简单的双向绑定入手：

// 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
})
复制代码

以上彷佛运行起来也没毛病，但咱们要的是数据驱动，而不是直接操做dom：

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

以上就是一个简单的双向数据绑定，但显然是不足的，下面继续升级。

2、以defineProperty实现响应系统

在Vue3版原本临前以defineProperty实现的数据响应，基于发布订阅模式，其主要包含三部分：Observer、Dep、Watcher。

1. 一个思路例子

// 须要劫持的数据
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)
})
复制代码

以上就是一个简单的劫持和监听流程，那对应的observer和Watch该如何实现？

2. Observer

observer的做用就是劫持数据，将数据属性转换为访问器属性，理一下实现思路：

• ①Observer须要将数据转化为响应式的，那它就应该是一个函数(类)，能接收参数。
• ②为了将数据变成响应式，那须要使用Object.defineProperty。
• ③数据不止一种类型，这就须要递归遍从来判断。

// 定义一个类供传入监听数据
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)

复制代码

3. Watcher

根据new Watch('a', () => {alert(1)})咱们猜想Watch应该是这样的：

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

那Watch和observer该如何关联？想一想它们之间有没有关联的点？彷佛能够从exp下手，这是它们共有的点：

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

data[exp]这句话是否是表示在取某个值，若是exp为a的话，那就表示data.a，在这以前data下的属性已经被咱们劫持为访问器属性了，那这就代表咱们能触发对应属性的get函数，那这就与observer产生了关联，那既然如此，那在触发get函数的时候能不能把触发者Watch给收集起来呢？此时就得须要一个桥梁Dep来协助了。

4. Dep

思路应该是data下的每个属性都有一个惟一的Dep对象，在get中收集仅针对该属性的依赖，而后在set方法中触发全部收集的依赖，这样就搞定了，看以下代码：

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]
  }
}

复制代码

此时对应的defineReactive咱们也要增长一些代码：

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() // 新增：通知对应的依赖
      }
    }
  })
}
复制代码

至此observer、Dep、Watch三者就造成了一个总体，分工明确。但还有一些地方须要处理，好比咱们直接对被劫持过的对象添加新的属性是监测不到的，修改数组的元素值也是如此。这里就顺便提一下Vue源码中是如何解决这个问题的：

对于对象：Vue中提供了Vue.set和vm.$set这两个方法供咱们添加新的属性，其原理就是先判断该属性是否为响应式的，若是不是，则经过defineReactive方法将其转为响应式。

对于数组：直接使用下标修改值仍是无效的，Vue只hack了数组中的七个方法：pop','push','shift','unshift','splice','sort','reverse'，使得咱们用起来依旧是响应式的。其原理是：在咱们调用数组的这七个方法时，Vue会改造这些方法，它内部一样也会执行这些方法原有的逻辑，只是增长了一些逻辑：取到所增长的值，而后将其变成响应式，而后再手动出发dep.notify()

3、以Proxy实现响应系统

Proxy是在目标前架设一层"拦截"，外界对该对象的访问，都必须先经过这层拦截，所以提供了一种机制，能够对外界的访问进行过滤和改写，咱们能够这样认为，Proxy是Object.defineProperty的全方位增强版。

依旧是三大件：Observer、Dep、Watch，咱们在以前的基础再完善这三大件。

1. Dep

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()
    }
  }
}
复制代码

2. Watch

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()
    }
  }
}
复制代码

3. Observer

与Object.defineProperty监听属性不一样，Proxy能够监听(实际是代理)整个对象，所以就不须要遍历对象的属性依次监听了，可是若是对象的属性依然是个对象，那么Proxy也没法监听，因此依旧使用递归套路便可。

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)
复制代码

至此就基本完成了三大件了，同时其不须要hack也能对数组进行监听。

4、触发依赖收集与批量异步更新

完成了响应式系统，也顺便提一下Vue源码中是如何触发依赖收集与批量异步更新的。

1. 触发依赖收集

在Vue源码中的$mount方法调用时会间接触发了一段代码：

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

这使得new Watcher()会先对其传入的参数进行求值，也就间接触发了vm._render()，这其实就会触发了对数据的访问，进而触发属性的get方法而达到依赖的收集。

2. 批量异步更新

Vue在更新DOM时是异步执行的。只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的全部数据变动。若是同一个watcher被屡次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免没必要要的计算和DOM操做是很是重要的。而后，在下一个的事件循环“tick”中，Vue刷新队列并执行实际 (已去重的) 工做。Vue在内部对异步队列尝试使用原生的Promise.then、MutationObserver和setImmediate，若是执行环境不支持，则会采用setTimeout(fn, 0)代替。

根据以上这段官方文档，这个队列主要是异步和去重，首先咱们来整理一下思路：

1. 须要有一个队列来存储一个事件循环中的数据变动，且要对它去重。
2. 将当前事件循环中的数据变动添加到队列。
3. 异步的去执行这个队列中的全部数据变动。

// 使用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的函数'：

// queue是一个数组，因此直接遍历执行便可
function flushQueue () {
  queue.forEach(watcher => {
    // 触发watcher中的run方法进行真正的更新操做
    watcher.run()
  })
  // 执行后清空队列
  queue = new Set()
}
复制代码

还有一个问题，那就是同一个事件循环中应该只要触发一次nextTick便可，而不是每次添加队列时都触发：

// 设置一个是否触发了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)
  }
}
复制代码

最后

以上就是响应式的一个大概原理，固然还有不少细节没说，感兴趣的能够去撸一撸源码，若是以为有所帮助，欢迎关注点个赞！

相关参考：

• Vue源码学习
• 实现双向绑定Proxy比defineproperty优劣如何?
• Vue.js源码全方位深刻解析