Detailed explanation of proxy access to Vue source code data

Concept analysis:

1) Data proxy: Operation (read/write) on properties in another object (inside the previous object) through one object proxy
2) vue data proxy: Proxy all properties in data object through vm object (i.e. this)
3) Benefits: More convenient operation of data in data
4) Basic implementation process
a. Add a property descriptor corresponding to the attribute of the data object to the vm through ()
b. All added properties contain getter/setter
c. getter/setter internally operates the corresponding attribute data in data

doubt

I wonder if you have ever thought about why the properties defined in data objects can be accessed using Vue instance this?

Let’s take a look at the implementation of the source code.

var sharedPropertyDefinition = {
 enumerable: true,
 configurable: true,
 get: noop,
 set: noop
};

// This is called in the source code: proxy(vm, '_data', key)// vm is an instance of Vue, key is the name of the data object attributefunction proxy (target, sourceKey, key) {
  = function proxyGetter () {
  return this[sourceKey][key]
 };
  = function proxySetter (val) {
  this[sourceKey][key] = val;
 };
 (target, key, sharedPropertyDefinition);
}

For example, there is a demo as follows

const vm = new Vue({
  el: '#app',
  data: { message: 'Hello Vue!' },
  created() {
    ()      // Output Hello Vue!    (this._data.message)   // Also output Hello Vue!  }
})

That is to say, when we write this, Vue sets a layer of proxy for , which actually accesses the message attribute in this._data , and the object pointed to by this._data is the data object we write.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.