詳解Vue源碼之?dāng)?shù)據(jù)的代理訪問
概念解析：
1) 數(shù)據(jù)代理: 通過一個(gè)對象代理對另一個(gè)對象(在前一個(gè)對象內(nèi)部)中屬性的操作(讀/寫)
2) vue 數(shù)據(jù)代理: 通過 vm 對象（即this）來代理 data 對象中所有屬性的操作
3) 好處: 更方便的操作 data 中的數(shù)據(jù)
4) 基本實(shí)現(xiàn)流程
a. 通過 Object.defineProperty()給 vm 添加與 data 對象的屬性對應(yīng)的屬性描述符
b. 所有添加的屬性都包含 getter/setter
c. getter/setter 內(nèi)部去操作 data 中對應(yīng)的屬性數(shù)據(jù)
疑問
不知道你在使用Vue的時(shí)候有沒有想過，為什么定義在 data 對象中的屬性，可以用 Vue 的實(shí)例 this 進(jìn)行訪問？
我們來看看源碼的實(shí)現(xiàn)。
var sharedPropertyDefinition = {
enumerable: true,
configurable: true,
get: noop,
set: noop
};
// 源碼中是這樣調(diào)用的：proxy(vm, '_data', key)
// vm是Vue的實(shí)例，key是data對象屬性的名字
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!
}
})
也就是說當(dāng)我們這樣 this.message 寫的時(shí)候， Vue 通過 Object.defineProperty 給 this.message 設(shè)置一層代理，實(shí)際訪問的是 this._data 里的 message 屬性，而 this._data 指向的對象就是我們寫的 data 對象。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?Router?實(shí)現(xiàn)登錄后跳轉(zhuǎn)到之前想要訪問的頁面
這篇文章主要介紹了Vue?Router?實(shí)現(xiàn)登錄后跳轉(zhuǎn)到之前相要訪問的頁面,本文僅演示路由跳轉(zhuǎn)和導(dǎo)航守衛(wèi)相關(guān)代碼的實(shí)現(xiàn)，不包含具體的權(quán)限驗(yàn)證和登錄請求，需要的朋友可以參考下2022-12-12
vue實(shí)現(xiàn)移動端的開關(guān)按鈕
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動端的開關(guān)按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
如何實(shí)現(xiàn)一個(gè)簡易版的vuex持久化工具
這篇文章主要介紹了實(shí)現(xiàn)一個(gè)簡易版的vuex持久化工具，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue3實(shí)現(xiàn)登錄表單驗(yàn)證功能
這篇文章主要介紹了Vue3實(shí)現(xiàn)登錄表單驗(yàn)證功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了在 Vue.js中優(yōu)雅地使用全局事件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
用Vue.js在瀏覽器中實(shí)現(xiàn)裁剪圖像功能
在本教程中，我們將探討如何在瀏覽器中使用 JavaScript 庫來操作圖片，為服務(wù)器上的存儲做準(zhǔn)備，并在 Web 程序中使用。我們將使用 Vue.js 而不是原生 JavaScript來完成此操作,需要的朋友可以參考下2019-06-06
當(dāng)一個(gè)較復(fù)雜的vue項(xiàng)目打包后，文件會非常大，而且訪問時(shí)資源加載速度很慢，本文介紹了幾種措施來優(yōu)化。2020-09-09
這篇文章主要介紹了vant中的toast層級改變操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue中使用svg畫路徑圖的相關(guān)知識，在這大家需要注意svg中不能使用html標(biāo)簽，例如div，img等，因此在svg中一般使用image標(biāo)簽放置圖片，text圖片放置文本內(nèi)容,詳細(xì)代碼跟隨小編一起看看吧2022-04-04
Vue3+Canvas實(shí)現(xiàn)坦克大戰(zhàn)游戲(二)
本文主要給大家講解一下子彈擊中物體、物體銷毀、敵方坦克構(gòu)建生成、運(yùn)動算法、爆炸效果、以及障礙物的生成，感興趣的小伙伴可以了解一下2022-03-03