您好,登錄后才能下訂單哦!
小編給大家分享一下Vue源碼之?dāng)?shù)據(jù)代理訪問(wèn)的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
概念解析:
1) 數(shù)據(jù)代理: 通過(guò)一個(gè)對(duì)象代理對(duì)另一個(gè)對(duì)象(在前一個(gè)對(duì)象內(nèi)部)中屬性的操作(讀/寫)
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)行訪問(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 寫的時(shí)候, Vue 通過(guò) Object.defineProperty 給 this.message 設(shè)置一層代理,實(shí)際訪問(wèn)的是 this._data 里的 message 屬性,而 this._data 指向的對(duì)象就是我們寫的 data 對(duì)象。
以上是“Vue源碼之?dāng)?shù)據(jù)代理訪問(wèn)的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。