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.变量