詳解Vue源碼之?dāng)?shù)據(jù)的代理訪問
概念解析：
1) 數(shù)據(jù)代理: 通過一個(gè)對(duì)象代理對(duì)另一個(gè)對(duì)象(在前一個(gè)對(duì)象內(nèi)部)中屬性的操作(讀/寫)
2) vue 數(shù)據(jù)代理: 通過 vm 對(duì)象（即this）來代理 data 對(duì)象中所有屬性的操作
3) 好處: 更方便的操作 data 中的數(shù)據(jù)
4) 基本實(shí)現(xiàn)流程
a. 通過 Object.defineProperty()給 vm 添加與 data 對(duì)象的屬性對(duì)應(yīng)的屬性描述符
b. 所有添加的屬性都包含 getter/setter
c. getter/setter 內(nèi)部去操作 data 中對(duì)應(yīng)的屬性數(shù)據(jù)
疑問
不知道你在使用Vue的時(shí)候有沒有想過，為什么定義在 data 對(duì)象中的屬性，可以用 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對(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!
}
})
也就是說當(dāng)我們這樣 this.message 寫的時(shí)候， Vue 通過 Object.defineProperty 給 this.message 設(shè)置一層代理，實(shí)際訪問的是 this._data 里的 message 屬性，而 this._data 指向的對(duì)象就是我們寫的 data 對(duì)象。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue中,強(qiáng)制刷新組件通常涉及到以下幾種方法,本文給大家列出了常見的三種vue強(qiáng)制刷新組件的方法,感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章主要給大家介紹了關(guān)于vue-router懶加載的3種方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
本篇文章主要介紹了詳解基于vue-cli優(yōu)化的webpack配置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
Vue項(xiàng)目中keepAlive的使用說明(超級(jí)實(shí)用版)
這篇文章主要介紹了Vue項(xiàng)目中keepAlive的使用說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
使用vue深度選擇器修改ElementUI組件內(nèi)樣式的示例代碼
在帶有scoped屬性的style中書寫樣式時(shí)，無法作用影響到子組件中的樣式，此時(shí)我們會(huì)使用到deep深度選擇器，來解決此問題，我們?cè)谑褂胠ess預(yù)處理器，能正常使用，但是在scss預(yù)處理器中會(huì)報(bào)錯(cuò)，下面通過本文介紹vue深度選擇器修改ElementUI組件內(nèi)樣式,需要的朋友可以參考下2022-12-12
vue2.0實(shí)現(xiàn)導(dǎo)航菜單切換效果
這篇文章主要為大家詳細(xì)介紹了vue2.0實(shí)現(xiàn)導(dǎo)航菜單切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
詳解Vue的組件中data選項(xiàng)為什么必須是函數(shù)
這篇文章主要給大家介紹了關(guān)于Vue的組件中data選項(xiàng)為什么必須是函數(shù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
本文通過實(shí)例代碼給大家介紹Vue IP地址輸入框?qū)崿F(xiàn),代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10
Vue 利用指令實(shí)現(xiàn)禁止反復(fù)發(fā)送請(qǐng)求的兩種方法
這篇文章主要介紹了Vue 利用指令實(shí)現(xiàn)禁止反復(fù)發(fā)送請(qǐng)求的兩種方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
Vue 2.0學(xué)習(xí)筆記之使用$refs訪問Vue中的DOM
這篇文章主要介紹了Vue 2.0學(xué)習(xí)筆記之使用$refs訪問Vue中的DOM，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12