Vue中data中定义的变量可以通过this访问到的原理

Vue在初始化的过程中调用initState，进而调用InitData，对data做看一层proxy:

function initData (vm: Component) {
  let data = vm.$options.data
  data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {}
  // ....... 省略无数行代码.......
  // proxy data on instance
  let i = keys.length
  while (i--) {
    const key = keys[i]
    // .... code here ....
    // 关键：实现定义在data中，可以在methods， mounted里面通过this.属性访问的关键
      proxy(vm, `_data`, key)
  }
  // observe data
  observe(data, true /* asRootData */)
}

proxy方法的具体实现：

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的源码，不难发现，本质上 还是通过Object.defineProperty重写get set方法来实现的 // this.变量 === this._data.变量