一图看懂Vue响应式原理

如果要看Vue源码，网上的分析巨多，但是因为Vue源码逻辑分的很细致，以至于看起来每个文件之间跳来跳去看的有点累，于是画了一个图，对响应式的部分大致做了一个总结

如图

1. new Vue与Observer

1.1 起源src/core/instance/index.js

首先Vue定义在文件src/core/instance/index.js处，声明式定义后执行了一系列的初始化操作

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

_init方法对平常使用new Vue()传入的options进行了处理

1.2 initData

Vue.prototype._init = function (options?: Object) {
   ...
    // expose real self
    vm._self = vm
    // 实例生命周期的相关变量初始化
    initLifecycle(vm)
    // 事件监听初始化
    initEvents(vm)
    initRender(vm)
    // 到此，进入beforeCreate钩子函数，开始beforeCreate到created阶段
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    // 初始化各种状态 props/data/method/computed/watch
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    // 完成初始化，调用了created钩子函数
    callHook(vm, 'created')
  }

_init方法中，在initState函数中对绑定的数据进行了处理

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)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

我们重点来看initData()

function initData (vm: Component) {
  // 取到options里的data
  let data = vm.$options.data
  // proxy data on instance
  let i = keys.length
  // 判断变量名是否和methods方法名和props属性名重复，且不允许用$或者_开头
  while (i--) {
    const key = keys[i]
    if (process.env.NODE_ENV !== 'production') {
      // ...省略
    } else if (!isReserved(key)) {
      // 做代理，访问vm[key]代理到vm._data[key]
      proxy(vm, `_data`, key)
    }
  }
  // observe data
  observe(data, true /* asRootData */)
}

• 首先，函数取到new Vue里定义的data对象，然后进行了一些变量名是否重复的判断
• 对变量名不是$或者_开头进行代理，当访问this.xxx的时候代理到this._data[xxx]
• observe(data, true)响应式拦截

1.3 Observer（重点）

Observer模块是实现响应式的重点，下面来看看实际处理是怎么使用的
在src/core/observer/index.js中定义了observe的处理

export function observe (value: any, asRootData: ?boolean): Observer | void {
  if (!isObject(value) || value instanceof VNode) {
    return
  }
  let ob: Observer | void
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__ // 定义了监听就无须再次定义
  } else if (
    shouldObserve && // 默认设置为true
    !isServerRendering() && // 判断是否服务端
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) && // 可扩展
    !value._isVue
  ) {
    ob = new Observer(value)
  }
  if (asRootData && ob) {
    ob.vmCount++
  }
  return ob
}

• 进行一些配置属性的判断，然后实例化一个监听器Observer，对传入的data进行监听
  下面是Observer类的定义

export class Observer {
  value: any;
  dep: Dep;
  vmCount: number; // number of vms that have this object as root $data

  constructor (value: any) {
    this.value = value
    this.dep = new Dep() // 订阅器
    this.vmCount = 0
    def(value, '__ob__', this) // 对value定义了一个__ob__属性，指向监听器
    if (Array.isArray(value)) {
      // __proto__ in {} 是否可以用隐式属性__proto__
      if (hasProto) {
        protoAugment(value, arrayMethods) // 原型链继承Array
      } else {
        copyAugment(value, arrayMethods, arrayKeys) // 手动的实现Array原型上的属性和方法
      }
      this.observeArray(value) // 遍历每个元素执行observe
    } else {
      this.walk(value) // 定义响应式的监听处理
    }
  }

  walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i]) // 遍历传入value的每个值
    }
  }

  /**
   * Observe a list of Array items.
   */
  observeArray (items: Array) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i])
    }
  }
}

• 首先定义了一个订阅器Dep，对传入的value进行数组还是对象的判断，最后执行defineReactive

// 省略部分不重要代码
export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  const dep = new Dep() // 新订阅器

  // cater for pre-defined getter/setters
  const getter = property && property.get
  const setter = property && property.set

  // 子属性遍历监听
  let childOb = !shallow && observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      // watcher订阅者会在初次实例化的时候设置Dep.target属性为实例本身
      if (Dep.target) {
        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 (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      dep.notify() // 调用订阅器方法触发更新
    }
  })
}

• 从函数中我们可以看到在getter中如果存在Dep.target属性，就执行dep.depend()方法添加进订阅者列表中，在订阅者进行初始化操作时，如最开始的图，会进行设置Dep.target属性，循环触发这里的get拦截，然后移除Dep.target属性
• 在setter中，实现了常规的设置值的阶段后，进行了dep.notify()，通知订阅器来遍历订阅者列表，发布更新

至此，从new Vue()开始，Vue内部对其中传入的参数进行了分阶段的处理，保证了宽松输入，严格输出，对每个属性实现订阅-发布模式，初始化时添加进订阅列表，值发生更新时发布更新

对于对象来说

• 直接遍历对象的每一个key，然后定义响应式

对于数组来说

• 因为数组来说，需要对push,pop, shift, unshift, splice, sort, reverse这些方法执行的时候触发更新，所以定义响应式的数组需要去继承上这些自定义过的方法，才能够再变化时发布更新

2. template