Vue深刻响应式原理

Vue.js实现响应式的核心是利用了es5的object.defineProperty，这也是vue.js不能兼容ie8及如下浏览器的缘由。

Object.defineProperty

Object.defineProperty方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象，看下它的语法：

Object.defineProperty(obj,prop,descriptor)

obj是要在其上定义属性的对象;prop是要定义或修改的属性的名称;descriptor是将被定义或修改的属性描述符。descriptor里有不少可选键值，咱们最关心的是get和set,get是一个给属性提供的getter方法，当咱们访问了该属性的时候会触发getter方法;set是一个给属性提供的setter方法，当咱们对该属性作修改的时候会触发setter方法。一旦对象拥有了getter和setter，咱们能够简单地把这个对象称为响应式对象。

initState

在Vue的初始化阶段,_init方法执行的时候，会执行initState(vm)方法，它的定义在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)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}
复制代码

initState方法主要是对props、methods、data、computed和watcher等属性作了初始化操做。这里咱们重点分析下props和data，

initProps

function initProps (vm: Component, propsOptions: Object) {
  const propsData = vm.$options.propsData || {}
  const props = vm._props = {}
  // cache prop keys so that future props updates can iterate using Array
  // instead of dynamic object key enumeration.
  const keys = vm.$options._propKeys = []
  const isRoot = !vm.$parent
  // root instance props should be converted
  if (!isRoot) {
    toggleObserving(false)
  }
  for (const key in propsOptions) {
    keys.push(key)
    const value = validateProp(key, propsOptions, propsData, vm)
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      const hyphenatedKey = hyphenate(key)
      if (isReservedAttribute(hyphenatedKey) ||
          config.isReservedAttr(hyphenatedKey)) {
        warn(
          `"${hyphenatedKey}" is a reserved attribute and cannot be used as component prop.`,
          vm
        )
      }
      defineReactive(props, key, value, () => {
        if (vm.$parent && !isUpdatingChildComponent) {
          warn(
            `Avoid mutating a prop directly since the value will be ` +
            `overwritten whenever the parent component re-renders. ` +
            `Instead, use a data or computed property based on the prop's ` + `value. Prop being mutated: "${key}"`, vm ) } }) } else { defineReactive(props, key, value) } // static props are already proxied on the component's prototype
    // during Vue.extend(). We only need to proxy props defined at
    // instantiation here.
    if (!(key in vm)) {
      proxy(vm, `_props`, key)
    }
  }
  toggleObserving(true)
}
复制代码

props的初始化主要过程，就是遍历定义的props配置。遍历的过程主要作两件事，一是调用defineReactive方法把每一个prop对应的值变成响应式，能够经过vm._props.xxx访问到定义props中对应的属性。另外一个是经过proxy把vm._props.xxx的访问代理到vm.xxx上。

initData

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)
    }
  }
  // observe data
  observe(data, true /* asRootData */)
}
复制代码

拿到option.data赋值给vm._data变成一个对象，而后遍历全部的keys值，而后在某些状况下报一些警告，而后把_data上的东西代理到咱们的vm实例上。另外调用observe观测整个data的变化，把data也变成响应式，能够经过vm._data.xxx访问到定义data返回函数中对应的属性。

proxy

代理的做用是把props和data上的属性代理到vm实例上，这也就是为何咱们定义了以下props，却能够经过vm实例访问到它。

let test = {
    props:{
        msg:'hello world'
    },
    methods:{
        getTest(){
            console.log(this.msg)
        }
    }
}
复制代码

咱们在getTest函数中经过this.msg访问到咱们定义的props中的msg,这个过程发生在proxy阶段:

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

复制代码

经过Object.defineProperty把target[sourceKey][key]的读写变成了对target[key]的读写。因此对于props而言，对vm._props.xxx的读写变成了vm.xxx的读写，而对于vm.xxx访问定义在props中的xxx属性了。同理对于data而言，对vm._data.xxxx的读写变成了对vm.xxxx的读写，而对于vm._data.xxxx的读写，咱们能够访问到定义在data函数返回对象中的属性，因此咱们就能够经过vm.xxxx访问到定义在data函数返回对象中的xxxx属性了。