2019-01-05

Vue的响应式原理

今天也来写一下vue的响应式原理好让自己更加深刻理解整个过程。
其实大家都知道Vue采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter。在数据变动时发布消息给订阅者，然后触发相应回调。
这里先概括一下整个过程下来是怎样的，然后再一步步看Vue里面的代码是怎么实现这个过程。

在new Vue()里面，有一系列的初始化操作，其中有一个是initState，在initState这个方法里面包含了data，props，computed几个的初始化操作。我们现在先只管data，data的初始化工作是放在initData。initData将data里面的数据进行setter,getter劫持。
如果有多个订阅者想订阅这个属性变化怎么办呢，这个时候就需要一个存放订阅者的队列了。我们希望data里面的每个属性都维护好自己的订阅者队列。这个队列在Vue里面就是Dep啦，在劫持属性setter,getter的时候同时给这个属性添加了一个属于本身的订阅者队列。
看到上面发现观察者（劫持）有了，队列有了，只剩下关键的一点，怎么把订阅者放在队列里面。其实这里面往深层次想一下大概就知道答案肯定是订阅者自己把自己放到队列里面了，因为只有订阅者自己需要订阅哪一个属性。但是这里有一个问题就是队列维护在属性的观察者那里，作用域被隔离了。这里各自为了拿到对方的实例有点绕。概括一下就是，订阅者(Watcher类)实例化的时候会对通过Dep类的一个静态属性target来保存订阅者(Watcher实例)自身，然后对订阅的属性进行求值。我们从上面得知，属性的setter被劫持了，劫持做的东西就是调用队列(Dep实例)的depend方法。所以上面订阅者(Watcher实例)在对属性求值的时候会触发到这个depend方法，depend方法就会把队列(Dep实例)自身实例传回给订阅者(Watcher实例),这样订阅者(Watcher实例)就拿到了属性的订阅队列啦，这样就可以把订阅者(Watcher实例)自己放到队列(Dep实例)里面。到时候如果订阅属性发生变更的时候就可以直接从队列里面把所有订阅者拿出来触发回调了。

/**src/core/instance/init.js **/

export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
    ...
    ...
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initInjections(vm) 
    initState(vm) //数据初始化的开端
    initProvide(vm) 
    callHook(vm, 'created')
    ...
    ...
  }
}

我们现在进去看看这个initState

/**src/core/instance/state.js **/

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)     //如果参数里面有data我们就initData
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

好了，我们来到了关键的地方initData。

/**src/core/instance/state.js **/

function initData (vm: Component) {
  let data = vm.$options.data
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
  if (!isPlainObject(data)) {
    data = {}
    process.env.NODE_ENV !== 'production' && warn(
      'data functions should return an object:\n' +
      'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
      vm
    )
  }
  // proxy data on instance
  const keys = Object.keys(data)
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  while (i--) {
    const key = keys[i]
    if (process.env.NODE_ENV !== 'production') {
      if (methods && hasOwn(methods, key)) {
        warn(
          `Method "${key}" has already been defined as a data property.`,
          vm
        )
      }
    }
    if (props && hasOwn(props, key)) {
      process.env.NODE_ENV !== 'production' && warn(
        `The data property "${key}" is already declared as a prop. ` +
        `Use prop default value instead.`,
        vm
      )
    } else if (!isReserved(key)) {
      proxy(vm, `_data`, key) //代理data到实例上面
    }
  }
  
  observe(data, true /* asRootData */) //劫持data上的属性
}
//代理的做法
const sharedPropertyDefinition = {
  enumerable: true,
  configurable: true,
  get: noop,
  set: noop
}

export function proxy (target: Object, sourceKey: string, key: string) {
  sharedPropertyDefinition.get = function proxyGetter () {
    return this[sourceKey][key]
  }
  sharedPropertyDefinition.set = function proxySetter (val) {
    this[sourceKey][key] = val
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

这里我们可以关注一下proxy这个方法。initData一开始就是将data挂到实例的_data字段上面去。按照上面的例子来就是我们可以通过test._data.a来访问，不过每次都这样访问有点麻烦，所以Vue就帮我们做了一层代理，让我们可以直接test.a这样来访问。这里的做法很简单就是重新在实例上面重新定义这里这些属性。
重头戏来了，observe方法。这里我们就略过一些代码直接看最重要的劫持属性getter，setter。

/**src/core/observer/index.js **/
export class Observer {
  ....
  ....
  walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }
  ....
  ....
}
export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  const dep = new Dep() //为当前属性建立自己的订阅队列

  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }

  const getter = property && property.get
  const setter = property && property.set
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key]
  }

  let childOb = !shallow && observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {  
        //如果对当前属性就行求值的时候发现有订阅者，就执行depend方法把订阅队列放回给订阅者
        dep.depend()   
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      if (getter && !setter) return
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      dep.notify()
    }
  })
}

/**src/core/observer/dep.js**/
//Dep的实现
let uid = 0

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 () {
    const subs = this.subs.slice()
    if (process.env.NODE_ENV !== 'production' && !config.async) {
      subs.sort((a, b) => a.id - b.id)
    }
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}

Dep.target = null
const targetStack = []
//指向当前的订阅者
export function pushTarget (target: ?Watcher) {
  targetStack.push(target)
  Dep.target = target
}

export function popTarget () {
  targetStack.pop()
  Dep.target = targetStack[targetStack.length - 1]
}

walk方法遍历data每个属性，执行defineReactive方法，defineReactive方法先为这个属性建立一个存放订阅者的队列(Dep实例)，这里我们看一下Dep类的实现。劫持属性setter时做的就是执行Dep实例的depend方法。depend方法很简单，可以看上面的实现。这里的关键其实就是Dep.target跟this，看到Dep.target类型我们大概知道这是一个订阅者，但在哪里赋值的话我们先不管。然后就是这个this了，this是指向Dep实例的。这样我们就能顺利地把对订阅队列交给订阅者了。这样只需要调用订阅队列的addSub方法将自己放进去就行了。这里我们在Watcher里面看看实现就行了。

/**src/core/observer/watcher.js**/
...
export default class Watcher {
  ....省略代码
  ....省略代码

  constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    ....省略代码
    ....省略代码
    this.value = this.lazy
      ? undefined
      : this.get()
  }
  ....省略代码
  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 {
      if (this.deep) {
        traverse(value)
      }
      popTarget()
      this.cleanupDeps()
    }
    return value
  }
  ...省略代码
  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)
      }
    }
  }
  ....省略代码
  update () {
    if (this.lazy) {
      this.dirty = true
    } else if (this.sync) {
      this.run()
    } else {
      queueWatcher(this)
    }
  }

  run () {
    if (this.active) {
      const value = this.get()
      if (
        value !== this.value ||
        isObject(value) ||
        this.deep
      ) {
        const oldValue = this.value
        this.value = value
        if (this.user) {
          try {
            this.cb.call(this.vm, value, oldValue)
          } catch (e) {
            handleError(e, this.vm, `callback for watcher "${this.expression}"`)
          }
        } else {
          this.cb.call(this.vm, value, oldValue)
        }
      }
    }
  }

  depend () {
    let i = this.deps.length
    while (i--) {
      this.deps[i].depend()
    }
  }
 
}

看Watcher的addDep方法，这个方法就是将订阅者本身放到队列里面的实现。每一个订阅者都有自己的update方法，属性setter劫持就是调用队列里面每一个订阅者的update方法。
上面就是Vue的响应式原理了。这里比较绕的地方就是队列跟订阅者之间怎么互相传递自己的实例给对方使用而已。我们很简单的概括就是每个数据属性都有一个存放订阅自己的订阅者的队列，但是这个队列作用域与订阅者之间做了一个隔离，所以Vue就用了互相传递的方式将对方传给自己使用。就是通过一个类似全局的属性来存放当前的订阅者，然后属性的队列拿到这个订阅者之后将自己传入到这个订阅者里面，最后订阅者拿到了队列就又把自己放入队列中。
其实上面说了这么多，大家都发现这里面还缺乏了一个很关键的环境。就是怎么把订阅者跟Dep.target关联起来呢。其实就很简单就是new Watcher的时候对订阅的属性进行求值，求值的过程当作顺便把Dep.target关联到自身。求值的时候调用了Watcher类的get方法，get方法里面pushTarget(this)就是做这件事情的。

最后给出一个大家都看过的例子，然后用这个例子结合来最后说明一下整个情况。

const test = new Vue({
  data:{
    a:1
  }
})
new Watcher(test, "a", (value)=>console.log(value))
test.a = 2

initData阶段：为a生成一个订阅者队列，对a的getter，setter进行劫持。getter做的事情就是将自己的订阅者队列暴露给外部的订阅者

new Watcher阶段：将实例复制给Dep.target，然后对a进行求值操作，触发getter方法，然后把实例放进去上面暴露出来的订阅者队列，将匿名回调方法放在update方法里面以进行统一调用

test.a = 2阶段：触发setter方法，调用队列的notify方法，通知队列里面所有订阅者数据发生了变化，然后循环队列里面的订阅者，执行他们的update方法实现回调。

这一篇就说明一下Vue响应式的基本原理。

Hillterry

Blog

Vue的响应式原理