浅析Vue响应式原理（一）

浅析Vue响应式原理（一）

Vue的特点之一是响应式，视图随着数据的更新而更新，在视图中修改数据后Vue实例中的数据也会同步更新。内部借助依赖(下文中的Dep类)来实现，数据的获取（即get操作）会触发收集依赖，而对数据赋值（即set操作）会通知依赖数据更新，重新渲染视图。对数据的get/set操作的拦截借助的是ES5的Object.defineProperty。

总体架构简介

在Vue源码内，Dep类作为依赖，Watcher类则用来收集依赖和通知依赖重新求值。对于在实例化时传入的数据，使用工厂函数defineReactive令其响应式。而在实例后再通过Vue.set/vm.$set添加的响应式数据，则需要借助Observer类来使其成为响应式数据，最后也是通过defineReactive实现响应式。

对于每个响应式数据，会有两个Dep实例，第一个是在defineReactive中的闭包遍历，用途显而易见。而第二个Dep则在响应式数组的__ob__属性值中，这个值是Observer实例，其实例属性dep是Dep实例，在执行Vue.set/vm.$set添加响应式数据后，会通知依赖更新。

在讲defineReactive之前，先讲一下这些辅助类的实现和用处。

Dep

我们都知道，Vue响应式的实现，会在getter中收集响应式数据的依赖，在setter中通知依赖数据更新，重新计算数据然后来更新视图。在Vue内部，使用Dep实例表示依赖，让我们看一下Dep类是怎么定义的。

Dep有两个实例属性，一个静态属性。静态属性target是Watcher实例，功能是重新求值和通知视图更新，下文我们会讲到。实例属性id是Dep实例的唯一标识，无需多说；属性subs是Watcher实例数组，用于收集Watcher实例，当依赖更新时，这些Watcher实例就会重新求值。

export default class Dep {
  static target: ?Watcher;
  id: number;
  subs: Array<Watcher>;

  constructor () {
    this.id = uid++
    this.subs = []
  }

  addSub (sub: Watcher) {
    this.subs.push(sub)
  }

  removeSub (sub: Watcher) {
    remove(this.subs, sub)
  }

  depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }

  notify () {
    // stabilize the subscriber list first
    const subs = this.subs.slice()
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}

方法addSub用于添加Watcher实例到subs中，方法removeSub用于从subs移除Watcher实例。

方法depond会在收集依赖的时候调用，实际上执行了Watcher的实例方法addDep，在addDep内除了调用dep实例的addSup方法外，还做了避免重复收集Watcher实例的工作。这个方法会在Vue为响应式数据设置的自定义getter中执行。

notify方法则遍历subs，执行Watcher实例方法update来重新求值。这个方法会在Vue为响应式数据设置的自定义setter中执行。

有人可能有疑问，target是静态属性，那不是每个实例的target都一样的？实际上，重新求值的操作在Watcher实例方法get内实现。在get方法内，会先调用pushTarget来更新Dep.target，使其指向当前Watcher实例，之前的`Dep.target会被保存targetStack末尾（相当于入栈操作），完成操作后会执行popTarget函数，从targetStack取出最后一个元素来还原Dep.target（相当于出栈操作）。

Dep.target = null
const targetStack = []

export function pushTarget (_target: ?Watcher) {
  if (Dep.target) targetStack.push(Dep.target)
  Dep.target = _target
}

export function popTarget () {
  Dep.target = targetStack.pop()
}

Watcher

当依赖更新时，Watcher类会重新求值，并可能触发重渲染。

constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    this.vm = vm
    // 与渲染相关的watcher
    if (isRenderWatcher) {
      vm._watcher = this
    }
    vm._watchers.push(this)
    // options
    if (options) {
      this.deep = !!options.deep
      this.user = !!options.user
      this.computed = !!options.computed
      this.sync = !!options.sync
      this.before = options.before
    } else {
      this.deep = this.user = this.computed = this.sync = false
    }
    this.cb = cb
    this.id = ++uid // uid for batching
    this.active = true
    this.dirty = this.computed // for computed watchers
    this.deps = []
    this.newDeps = []
    this.depIds = new Set()
    this.newDepIds = new Set()
    this.expression = process.env.NODE_ENV !== 'production'
      ? expOrFn.toString()
      : ''
    // parse expression for getter
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn
    } else {
      this.getter = parsePath(expOrFn)
      if (!this.getter) {
        this.getter = function () {}
        process.env.NODE_ENV !== 'production' && warn(
          `Failed watching path: "${expOrFn}" ` +
          'Watcher only accepts simple dot-delimited paths. ' +
          'For full control, use a function instead.',
          vm
        )
      }
    }
    if (this.computed) {
      this.value = undefined
      this.dep = new Dep()
    } else {
      this.value = this.get()
    }
  }

构造函数接受五个参数，vm是挂载的Component实例；expOrFn是观察的属性，当是字符串时表示属性名，是函数时会被当成属性的get方法；cb是属性更新后执行的回调函数；options是配置项；isRenderWatcher表示当前实例是否与渲染相关。

在构造函数内，先将实例属性vm指向传入的Component实例vm，如果当前Watcher实例与渲染相关，会将其保存在vm._watcher中。接着将当前实例添加到vm._watchers中，同时根据传入的配置项options初始化实例属性。实例属性getter是监听属性的getter函数，如果expOrFn是函数，直接赋值，否则会调用parsePath来获取属性的getter。

parsePath内部会先使用正则来判断属性名，如果有除数字、字母、.和$以外的字符时视为非法属性名，直接返回，所以属性只能是以.分隔的属性。如果属性名合法，则parsePath返回一个闭包函数，调用时会传入vm，即obj是vm的引用，这个闭包函数最终的目的是从vm实例里获取属性。

const bailRE = /[^\w.$]/
export function parsePath (path: string): any {
  if (bailRE.test(path)) {
    return
  }
  const segments = path.split('.')
  return function (obj) {
    for (let i = 0; i < segments.length; i++) {
      if (!obj) return
      obj = obj[segments[i]]
    }
    return obj
  }
}

初始化完成之后，如果不是计算属性相关的Watcher实例，会调用实例方法get求值。

get方法

执行getter方法求值，完成依赖收集的过程。

方法开始时，执行pushTarget(this)，将Dep.target指向当前Watcher实例。然后执行getter收集依赖，最后将Dep.target复原，并执行cleanDeps遍历deps。在每次求值之后，都会调用cleanupDeps方法重置依赖，具体如何重置，稍后再讲。

实际上，Dep.target指向的实例是即将要收集的目标。

getter的执行，除了会获取值外，还会触发在defineReactive中为属性设置的getter，完成依赖的收集。

  get () {
    pushTarget(this)
    let value
    const vm = this.vm
    try {
      value = this.getter.call(vm, vm)
    } catch (e) {
      if (this.user) {
        handleError(e, vm, `getter for watcher "${this.expression}"`)
      } else {
        throw e
      }
    } finally {
      // "touch" every property so they are all tracked as
      // dependencies for deep watching
      if (this.deep) {
        traverse(value)
      }
      popTarget()
      this.cleanupDeps()
    }
    return value
  }

addDep

addDep的功能是将当前Watcher实例添加到传入的Dep实例属性subs数组里去。

addDep接受一个Dep实例作为参数，如果 dep.id 没有在集合 newDepIds 之中，则添加。如果不在集合 depIds 中，则将当前实例添加到 dep.subs 中。 简单来说，这里的操作会避免重复收集依赖，这也是不直接调用dep.addSub(Dep.target)的原因。

  addDep (dep: Dep) {
    const id = dep.id
    if (!this.newDepIds.has(id)) {
      this.newDepIds.add(id)
      this.newDeps.push(dep)
      if (!this.depIds.has(id)) {
        dep.addSub(this)
      }
    }
  }

从这里可以看出来Dep实例和Watcher实例会相互引用。Dep实例将Watcher实例保存在实例属性subs中，在响应式属性调用setter时，执行notify方法，通知Watcher实例重新求值。

Watcher实例将Dep实例保存在集合newDeps，目的是避免重复收集依赖，同时会执行Dep实例方法addDep,将当前Watcher实例添加到Dep实例属性subs中。

cleanupDeps

对于Watcher来说，每次求值的依赖并不一定与上一次的相同，在每次执行get之后，都会调用cleanupDeps来重置收集的依赖。Watcher有四个实例属性用于记录依赖，分别是newDeps/newDepIds与deps/depIds。newDeps与deps是保存依赖的数组，newDepIds与depIds是保存依赖Id的集合。记录上一次求值依赖的属性是deps/depIds，记录下一次求值依赖的属性是newDeps/newDepIds（执行cleanupDeps时已经调用过getter重新求值了，所以说是上一次求值，下一次指的是下一次调用get的时候）。

  cleanupDeps () {
    let i = this.deps.length
    while (i--) {
      const dep = this.deps[i]
      if (!this.newDepIds.has(dep.id)) {
        dep.removeSub(this)
      }
    }
    // 交换depIds和newDepIds
    let tmp = this.depIds
    this.depIds = this.newDepIds
    this.newDepIds = tmp
    this.newDepIds.clear()
    // 交换deps和newDeps
    tmp = this.deps
    this.deps = this.newDeps
    this.newDeps = tmp
    this.newDeps.length = 0
  }

首先遍历deps，如果此次求值的依赖在下一次求值中并不存在，则需要调用removeSub方法，从subs数组中移除当前Watcher实例。

接着交换newDeps/newDepIds与deps/depIds，并清空交换后的newDeps/newDepIds。

update

Dep类的notify方法用于通知观察者重新求值，该方法内部实际是遍历subs数组，执行Watcher的update方法。

update 方法定义如下。当实例与计算属性相关时，xxx。如果不是计算属性相关时，判断是否需要同步触发，同步触发时调用run，否则执行queueWatcher(this)，交由调度模块统一调度。

  update () {
    if (this.computed) {
      if (this.dep.subs.length === 0) {
        this.dirty = true
      } else {
        this.getAndInvoke(() => {
          this.dep.notify()
        })
      }
    } else if (this.sync) {
      this.run()
    } else {
      queueWatcher(this)
    }
  }

teardown

销毁当前Watcher实例。$watch方法返回一个函数，函数内部就是Watcher实例调用teardown方法。

先判断Watcher实例是否在活跃状态。首先要从Vue实例的观察者队列_watchers中移除当前实例，如果vm正在销毁，因为性能的问题会跳过这一操作。接着遍历deps，取消这些Dep实例对当前Watcher实例的订阅。最后令this.active = false，表示当前Watcher实例已被销毁。

  teardown () {
    if (this.active) {
      // remove self from vm's watcher list
      // this is a somewhat expensive operation so we skip it
      // if the vm is being destroyed.
      if (!this.vm._isBeingDestroyed) {
        remove(this.vm._watchers, this)
      }
      let i = this.deps.length
      while (i--) {
        this.deps[i].removeSub(this)
      }
      this.active = false
    }
  }

getAndInvoke

不论是同步或异步更新，或者是计算属性相关的Wathcer实例，最终求值都是通过getAndInvoke方法。

getAndInvoke接收一个回调函数，会在重新求值且值更新后执行。

当新值与当前值不同时会被判定为值已更新。当值是对象时且this.deep为真时也判定为值已更新，尽管引用不发生改变，但其属性却可能发生变化，为避免属性发生改变而Watcher判断未更新的情况出现。

  getAndInvoke (cb: Function) {
    const value = this.get()
    if (
      value !== this.value ||
      // Deep watchers and watchers on Object/Arrays should fire even
      // when the value is the same, because the value may
      // have mutated.
      isObject(value) ||
      this.deep
    ) {
      // set new value
      const oldValue = this.value
      this.value = value
      this.dirty = false
      if (this.user) {
        try {
          cb.call(this.vm, value, oldValue)
        } catch (e) {
          handleError(e, this.vm, `callback for watcher "${this.expression}"`)
        }
      } else {
        cb.call(this.vm, value, oldValue)
      }
    }
  }

run

run方法内部只是对getAndInvoke的封装，传入的回调函数是实例化时传入的函数。执行之前会先判断Watcher实例是否已弃用。

  run () {
    if (this.active) {
      this.getAndInvoke(this.cb)
    }
  }

小结

由于篇幅的原因，本文只简单分析了辅助类和工厂函数的源码和功能。干巴巴地讲了这么多，现在来稍微捋一下。

Watcher类会保存响应式数据的getter函数，这个getter函数可能是实例化参数expOrFn（当其是函数类型时），也可能是执行parsePath(expOrFn)获取到的getter函数。实例方法update对外暴露，用于重新求值，实际上执行真正求值操作的get方法。方法addDep接受一个Dep实例参数，在执行订阅操作前还会执行两个if判断，避免重复订阅。

Dep类代表依赖，实例属性subs是Watcher数组，代表订阅了当前Dep实例的观察者实例，depond方法收集依赖，notify方法通知观察者实例重新求值。订阅列表中可能会有与渲染相关的观察者，所以可能会触发重渲染。

Observer类与Vue.set/vm.$set的联系比较大，所以分析放在后面。

参考链接

• Vue技术内幕|揭开数据响应系统的面纱
• Vue.js源码