概念解析：

1) 數(shù)據(jù)代理: 通過(guò)一個(gè)對(duì)象代理對(duì)另一個(gè)對(duì)象(在前一個(gè)對(duì)象內(nèi)部)中屬性的操作(讀/寫(xiě))
2) vue 數(shù)據(jù)代理: 通過(guò) vm 對(duì)象（即this）來(lái)代理 data 對(duì)象中所有屬性的操作
3) 好處: 更方便的操作 data 中的數(shù)據(jù)
4) 基本實(shí)現(xiàn)流程
a. 通過(guò) Object.defineProperty()給 vm 添加與 data 對(duì)象的屬性對(duì)應(yīng)的屬性描述符
b. 所有添加的屬性都包含 getter/setter
c. getter/setter 內(nèi)部去操作 data 中對(duì)應(yīng)的屬性數(shù)據(jù)

疑問(wèn)

不知道你在使用Vue的時(shí)候有沒(méi)有想過(guò)，為什么定義在 data 對(duì)象中的屬性，可以用 Vue 的實(shí)例 this 進(jìn)行訪(fǎng)問(wèn)？

我們來(lái)看看源碼的實(shí)現(xiàn)。

var sharedPropertyDefinition = { enumerable: true, configurable: true, get: noop, set: noop};// 源碼中是這樣調(diào)用的：proxy(vm, '_data', key)// vm是Vue的實(shí)例，key是data對(duì)象屬性的名字function proxy (target, sourceKey, key) { sharedPropertyDefinition.get = function proxyGetter () {  return this[sourceKey][key] }; sharedPropertyDefinition.set = function proxySetter (val) {  this[sourceKey][key] = val; }; Object.defineProperty(target, key, sharedPropertyDefinition);}

比如有個(gè)如下demo

const vm = new Vue({  el: '#app',  data: { message: 'Hello Vue!' },  created() {    console.log(this.message)      // 輸出Hello Vue!    console.log(this._data.message)   // 同樣輸出Hello Vue!  }})

也就是說(shuō)當(dāng)我們這樣 this.message 寫(xiě)的時(shí)候， Vue 通過(guò) Object.defineProperty 給 this.message 設(shè)置一層代理，實(shí)際訪(fǎng)問(wèn)的是 this._data 里的 message 屬性，而 this._data 指向的對(duì)象就是我們寫(xiě)的 data 對(duì)象。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。