Vue源碼之數據的代理訪問

疑問

不知道你在使用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對象。

完。