疑問

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

完。