vue 代理设置 访问图片_详解Vue源码之数据的代理访问
概念解析：
1) 數據代理: 通過一個對象代理對另一個對象(在前一個對象內部)中屬性的操作(讀/寫)
2) vue 數據代理: 通過 vm 對象(即this)來代理 data 對象中所有屬性的操作
3) 好處: 更方便的操作 data 中的數據
4) 基本實現流程
a. 通過 Object.defineProperty()給 vm 添加與 data 對象的屬性對應的屬性描述符
b. 所有添加的屬性都包含 getter/setter
c. getter/setter 內部去操作 data 中對應的屬性數據
疑問
不知道你在使用Vue的時候有沒有想過，為什么定義在 data 對象中的屬性，可以用 Vue 的實例 this 進行訪問？
我們來看看源碼的實現。
var sharedPropertyDefinition = {
enumerable: true,
configurable: true,
get: noop,
set: noop
};
// 源碼中是這樣調用的：proxy(vm, '_data', key)
// vm是Vue的實例，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);
}
比如有個如下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!
}
})
也就是說當我們這樣 this.message 寫的時候， Vue 通過 Object.defineProperty 給 this.message 設置一層代理，實際訪問的是 this._data 里的 message 屬性，而 this._data 指向的對象就是我們寫的 data 對象。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
總結
以上是生活随笔為你收集整理的vue 代理设置 访问图片_详解Vue源码之数据的代理访问的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： django.db.utils.Oper
- 下一篇： vue取url路径传参_vue不通过路由