Vue源码解析系列——数据驱动篇：data的代理

准备

vue版本号2.6.12，为方便分析，选择了runtime+compiler版本。

回顾

如果有感兴趣的同学可以看看我之前的源码分析文章，这里呈上链接：《Vue源码分析系列：目录》

Vue的data代理。

为什么data中定义的变量可以使用this.xxx访问到？我们一起来看源码来解决这个疑问吧。

Vue类的创建

找到定义Vue的文件src/core/instance/index.js

/**src/core/instance/index.js**/

//整个Vue的入口
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)
}

//初始化mixin
initMixin(Vue)
//somecode...

initMixin

进入initMixin方法查看执行过程。
这里先是进行了options的合并，然后调用了一些initxxx方法对Vue实例进行一些初始化。之后执行了created生命周期钩子。
这些初始化方法里面会发现一个initState的方法，好像与data有关，进入。

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

//...somecode
export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    
    //...somecode
    
    // merge options
    //对options进行合并
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options)
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    //初始化data
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')
    
    //...somecode

initState

首先映入眼帘的是一个proxy方法，这个我们一会在看。

/**src/core/instance/state.js**/
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)
}

继续往下。看到了一个initState方法，这个方法是用来初始化props、methods、data、computed、watch。还顺便给data添加上了observe。
不过这次我们主要看的是data，所以，进入intiData 。

/**src/core/instance/state.js**/
export function initState (vm: Component) {
  vm._watchers = []
  //获取option对象
  const opts = vm.$options
  //初始化props
  if (opts.props) initProps(vm, opts.props)
  //初始化methods
  if (opts.methods) initMethods(vm, opts.methods)
  //初始化data
  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

• 这里先判断data是个函数还是对象，并赋予默认值，然后挂载到vm也就是Vue实例上的_data中（这里要记住哦，data的所有属性现在都在vm._data中啦）。
• 之后遍历data的key值，检查在props、methods中是否有冲突名称。
• 核心部分来了，调用proxy函数，并传入Vue实例和data的各个key值。
  好喔，我们再次进入proxy。

/**src/core/instance/state.js**/
function initData (vm: Component) {
  let data = vm.$options.data
  //将data挂载到vm的_data上，并判断如果data是一个函数，调用这个函数（getData()），如果不是，就赋值
  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
  //遍历data，查看是否在props、methods中有相同的名称
  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)) {
      //代理data至vm对象
      proxy(vm, `_data`, key)
    }
  }
  // observe data
  observe(data, true /* asRootData */)
}

sharedPropertyDefinition

在定义proxy上方我们发现还有个sharedPropertyDefinition，看上去很像Object.defineProperty()的属性。不急，我们先看proxy。

/**src/core/instance/state.js**/
const sharedPropertyDefinition = {
  enumerable: true,
  configurable: true,
  get: noop,
  set: noop
}

proxy

这里就是data代理的核心了。

由于之前target传入的是vm，sourceKey是_data，所以这里的vm也就是Vue实例的data所有的key的属性上被设置了getter和setter。
意思就是，如果你使用console.log(this.message);会触发这里的get，真正被拿到的是vm上的_data中的message。还记得之前的initData方法吗？那个时候所有的data属性都已经被挂载到vm._data中了，所以这里拿到的就是你定义在data中的值了。

//                       vm,             `_data`,         key
export function proxy (target: Object, sourceKey: string, key: string) {

  //设置get，取值的方法
  sharedPropertyDefinition.get = function proxyGetter () {
    return this[sourceKey][key]
  }
  //设置set，设置的方法
  sharedPropertyDefinition.set = function proxySetter (val) {
    this[sourceKey][key] = val
  }
  //将传入的target代理至this
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

至此，Vue中data代理梳理完毕。